/* =========================================
   MATERIAL 3 DESIGN TOKENS (Native CSS)
   ========================================= */

:root {
  /* --- Reference Palette (Baseline Blue) --- */
  --md-ref-palette-primary0: #000000;
  --md-ref-palette-primary10: #001d36;
  --md-ref-palette-primary20: #003258;
  --md-ref-palette-primary30: #00497d;
  --md-ref-palette-primary40: #0061a4;
  --md-ref-palette-primary50: #2579bd;
  --md-ref-palette-primary60: #4693d8;
  --md-ref-palette-primary70: #64aef4;
  --md-ref-palette-primary80: #a0c9ff;
  --md-ref-palette-primary90: #d1e4ff;
  --md-ref-palette-primary95: #eaf1ff;
  --md-ref-palette-primary99: #fbfcff;
  --md-ref-palette-primary100: #ffffff;

  --md-ref-palette-secondary40: #535f70;
  --md-ref-palette-secondary80: #bbc7db;
  --md-ref-palette-secondary90: #d7e3f7;

  --md-ref-palette-neutral10: #191c20;
  --md-ref-palette-neutral90: #e2e2e9;
  --md-ref-palette-neutral95: #f1f0f7;
  --md-ref-palette-neutral99: #fbfcff;

  --md-ref-palette-neutral-variant30: #43474e;
  --md-ref-palette-neutral-variant50: #73777f;
  --md-ref-palette-neutral-variant80: #c3c7cf;
  --md-ref-palette-neutral-variant90: #dfe2eb;

  /* --- System Tokens (Light Mode - Default) --- */
  --md-sys-color-primary: var(--md-ref-palette-primary40);
  --md-sys-color-on-primary: var(--md-ref-palette-primary100);
  --md-sys-color-primary-container: var(--md-ref-palette-primary90);
  --md-sys-color-on-primary-container: var(--md-ref-palette-primary10);

  --md-sys-color-secondary: var(--md-ref-palette-secondary40);
  --md-sys-color-on-secondary: var(--md-ref-palette-primary100);
  --md-sys-color-secondary-container: var(--md-ref-palette-secondary90);
  --md-sys-color-on-secondary-container: #101c2b;

  --md-sys-color-surface: #f8f9ff;
  --md-sys-color-on-surface: var(--md-ref-palette-neutral10);
  --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant90);
  --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant30);
  --md-sys-color-surface-container-low: #f1f3f9;
  --md-sys-color-surface-container: #ebeef5;
  --md-sys-color-surface-container-high: #e5e8ef;

  --md-sys-color-outline: var(--md-ref-palette-neutral-variant50);
  --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant80);

  /* Tertiary — harmonized accent. Regenerate with Material Theme Builder
     (source #0061a4) for exact tones if you start using it prominently. */
  --md-sys-color-tertiary: #735471;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #fdd7f8;
  --md-sys-color-on-tertiary-container: #2b122c;

  /* Error roles (M3 standard) */
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;

  /* Extended surface tones */
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-highest: #dfe3ea;
  --md-sys-color-surface-dim: #d8dae0;
  --md-sys-color-surface-bright: #f8f9ff;

  /* Inverse + utility roles */
  --md-sys-color-inverse-surface: #2e3035;
  --md-sys-color-inverse-on-surface: #f0f0f7;
  --md-sys-color-inverse-primary: var(--md-ref-palette-primary80);
  --md-sys-color-surface-tint: var(--md-sys-color-primary);
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;

  /* --- Shape Tokens --- */
  --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;

  /* --- Typography Tokens --- */
  /* Each role carries size / line-height (unitless) / weight / tracking (letter-spacing).
     Line-heights and tracking follow the M3 type-scale spec. */
  --md-sys-typescale-display-large-font: 'Roboto Flex', 'Roboto', system-ui;
  --md-sys-typescale-display-large-size: 3.5625rem;   /* 57px */
  --md-sys-typescale-display-large-line-height: 1.12;
  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-large-tracking: -0.25px;

  --md-sys-typescale-headline-large-size: 2rem;       /* 32px */
  --md-sys-typescale-headline-large-line-height: 1.25;
  --md-sys-typescale-headline-large-tracking: 0;

  --md-sys-typescale-headline-medium-size: 1.75rem;   /* 28px */
  --md-sys-typescale-headline-medium-line-height: 1.29;
  --md-sys-typescale-headline-medium-tracking: 0;

  --md-sys-typescale-headline-small-size: 1.5rem;     /* 24px */
  --md-sys-typescale-headline-small-line-height: 1.33;
  --md-sys-typescale-headline-small-tracking: 0;

  --md-sys-typescale-title-large-size: 1.375rem;      /* 22px */
  --md-sys-typescale-title-large-line-height: 1.27;
  --md-sys-typescale-title-large-tracking: 0;

  --md-sys-typescale-title-medium-size: 1rem;         /* 16px */
  --md-sys-typescale-title-medium-line-height: 1.5;
  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-medium-tracking: 0.15px;

  --md-sys-typescale-title-small-size: 0.875rem;      /* 14px */
  --md-sys-typescale-title-small-line-height: 1.43;
  --md-sys-typescale-title-small-weight: 500;
  --md-sys-typescale-title-small-tracking: 0.1px;

  --md-sys-typescale-body-large-size: 1rem;           /* 16px */
  --md-sys-typescale-body-large-line-height: 1.5;
  --md-sys-typescale-body-large-tracking: 0.5px;

  --md-sys-typescale-body-medium-size: 0.875rem;      /* 14px */
  --md-sys-typescale-body-medium-line-height: 1.43;
  --md-sys-typescale-body-medium-tracking: 0.25px;

  --md-sys-typescale-body-small-size: 0.75rem;        /* 12px */
  --md-sys-typescale-body-small-line-height: 1.33;
  --md-sys-typescale-body-small-tracking: 0.4px;

  --md-sys-typescale-label-large-size: 0.875rem;      /* 14px */
  --md-sys-typescale-label-large-line-height: 1.43;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-tracking: 0.1px;

  --md-sys-typescale-label-medium-size: 0.75rem;      /* 12px */
  --md-sys-typescale-label-medium-line-height: 1.33;
  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-medium-tracking: 0.5px;

  --md-sys-typescale-label-small-size: 0.6875rem;     /* 11px */
  --md-sys-typescale-label-small-line-height: 1.45;
  --md-sys-typescale-label-small-weight: 500;
  --md-sys-typescale-label-small-tracking: 0.5px;

  /* --- Elevation Tokens (M3 dual key + ambient shadows) --- */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0px 1px 2px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level2: 0px 1px 2px rgba(0, 0, 0, 0.30), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level3: 0px 1px 3px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level4: 0px 2px 3px rgba(0, 0, 0, 0.30), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level5: 0px 4px 4px rgba(0, 0, 0, 0.30), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
}

/* --- System Tokens (Dark Mode Override) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-sys-color-primary: var(--md-ref-palette-primary80);
    --md-sys-color-on-primary: var(--md-ref-palette-primary20);
    --md-sys-color-primary-container: var(--md-ref-palette-primary30);
    --md-sys-color-on-primary-container: var(--md-ref-palette-primary90);

    --md-sys-color-secondary: var(--md-ref-palette-secondary80);
    --md-sys-color-on-secondary: #253140;
    --md-sys-color-secondary-container: #3b4858;
    --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary90);

    --md-sys-color-surface: #111318;
    --md-sys-color-on-surface: var(--md-ref-palette-neutral90);
    --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant30);
    --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant80);
    --md-sys-color-surface-container-low: #191c20;
    --md-sys-color-surface-container: #1e2025;
    --md-sys-color-surface-container-high: #282a2f;

    --md-sys-color-outline: #8d9199;
    --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant30);

    --md-sys-color-tertiary: #e1bbdc;
    --md-sys-color-on-tertiary: #422740;
    --md-sys-color-tertiary-container: #5a3d57;
    --md-sys-color-on-tertiary-container: #fdd7f8;

    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;

    --md-sys-color-surface-container-lowest: #0c0e13;
    --md-sys-color-surface-container-highest: #33353a;
    --md-sys-color-surface-dim: #111318;
    --md-sys-color-surface-bright: #37393e;

    --md-sys-color-inverse-surface: var(--md-ref-palette-neutral90);
    --md-sys-color-inverse-on-surface: #2e3035;
    --md-sys-color-inverse-primary: var(--md-ref-palette-primary40);
    --md-sys-color-surface-tint: var(--md-sys-color-primary);
    --md-sys-color-scrim: #000000;
    --md-sys-color-shadow: #000000;
  }
}

/* Manual Dark Theme Toggle Support */
[data-theme="dark"] {
  --md-sys-color-primary: var(--md-ref-palette-primary80);
  --md-sys-color-on-primary: var(--md-ref-palette-primary20);
  --md-sys-color-primary-container: var(--md-ref-palette-primary30);
  --md-sys-color-on-primary-container: var(--md-ref-palette-primary90);

  --md-sys-color-secondary: var(--md-ref-palette-secondary80);
  --md-sys-color-on-secondary: #253140;
  --md-sys-color-secondary-container: #3b4858;
  --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary90);

  --md-sys-color-surface: #111318;
  --md-sys-color-on-surface: var(--md-ref-palette-neutral90);
  --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant30);
  --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant80);
  --md-sys-color-surface-container-low: #191c20;
  --md-sys-color-surface-container: #1e2025;
  --md-sys-color-surface-container-high: #282a2f;

  --md-sys-color-outline: #8d9199;
  --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant30);

  --md-sys-color-tertiary: #e1bbdc;
  --md-sys-color-on-tertiary: #422740;
  --md-sys-color-tertiary-container: #5a3d57;
  --md-sys-color-on-tertiary-container: #fdd7f8;

  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;

  --md-sys-color-surface-container-lowest: #0c0e13;
  --md-sys-color-surface-container-highest: #33353a;
  --md-sys-color-surface-dim: #111318;
  --md-sys-color-surface-bright: #37393e;

  --md-sys-color-inverse-surface: var(--md-ref-palette-neutral90);
  --md-sys-color-inverse-on-surface: #2e3035;
  --md-sys-color-inverse-primary: var(--md-ref-palette-primary40);
  --md-sys-color-surface-tint: var(--md-sys-color-primary);
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}