/* =========================================
   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);

  /* --- 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: 10px;
  --md-sys-shape-corner-large: 12px;
  --md-sys-shape-corner-extra-large: 24px;
  --md-sys-shape-corner-full: 9999px;

  /* --- Typography Tokens --- */
  --md-sys-typescale-display-large-font: 'Roboto', system-ui;
  --md-sys-typescale-display-large-size: 3.5rem;
  --md-sys-typescale-display-large-weight: 400;

  --md-sys-typescale-headline-large-size: 2rem;
  --md-sys-typescale-headline-medium-size: 1.75rem;
  --md-sys-typescale-headline-small-size: 1.5rem;

  --md-sys-typescale-title-large-size: 1.375rem;
  --md-sys-typescale-title-medium-size: 1rem;
  --md-sys-typescale-title-small-size: 0.875rem;

  --md-sys-typescale-body-large-size: 1rem;
  --md-sys-typescale-body-medium-size: 0.875rem;
  --md-sys-typescale-body-small-size: 0.75rem;

  --md-sys-typescale-label-large-size: 0.875rem;
  --md-sys-typescale-label-medium-size: 0.75rem;
}

/* --- 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);
  }
}

/* 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);
}