/* Material Design 3 (MD3) Design Tokens */
:root {
  /* Color Palette - Seed Color: #1B6B93 (Operational Blue) */
  --md-sys-color-primary: #006494;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #cbe6ff;
  --md-sys-color-on-primary-container: #001e30;
  
  --md-sys-color-secondary: #50606e;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d3e5f5;
  --md-sys-color-on-secondary-container: #0c1d29;
  
  --md-sys-color-tertiary: #65587b;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ebddff;
  --md-sys-color-on-tertiary-container: #201634;
  
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  
  --md-sys-color-background: #fcfcff;
  --md-sys-color-on-background: #1a1c1e;
  --md-sys-color-surface: #fcfcff;
  --md-sys-color-on-surface: #1a1c1e;
  --md-sys-color-surface-variant: #dee3ea;
  --md-sys-color-on-surface-variant: #41474d;
  --md-sys-color-outline: #72777e;
  --md-sys-color-outline-variant: #c2c7ce;

  /* Typography Scale */
  --md-sys-typescale-display-large: 57px / 64px "Roboto", sans-serif;
  --md-sys-typescale-headline-large: 32px / 40px "Roboto", sans-serif;
  --md-sys-typescale-title-large: 22px / 28px "Roboto", sans-serif;
  --md-sys-typescale-body-large: 16px / 24px "Roboto", sans-serif;
  --md-sys-typescale-label-large: 14px / 20px "Roboto", sans-serif;

  /* Shape System */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
}

/* Dark Theme Tokens Override */
@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #8ecdff;
    --md-sys-color-on-primary: #003450;
    --md-sys-color-primary-container: #004b71;
    --md-sys-color-on-primary-container: #cbe6ff;
    
    --md-sys-color-background: #1a1c1e;
    --md-sys-color-on-background: #e2e2e5;
    --md-sys-color-surface: #1a1c1e;
    --md-sys-color-on-surface: #e2e2e5;
    --md-sys-color-surface-variant: #41474d;
    --md-sys-color-on-surface-variant: #c2c7ce;
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
}