/* ============================================================
   PyFDA Web — Material Design 3 Expressive Design Tokens
   ============================================================ */

/* ---------- Color Scheme (Light) ---------- */
:root {
  /* Primary tonal palette — deep indigo */
  --md-sys-color-primary:            #3a5ba9;
  --md-sys-color-on-primary:         #ffffff;
  --md-sys-color-primary-container:  #d8e2ff;
  --md-sys-color-on-primary-container: #001a41;

  /* Secondary — muted teal */
  --md-sys-color-secondary:          #565e71;
  --md-sys-color-on-secondary:       #ffffff;
  --md-sys-color-secondary-container:#dae2f9;
  --md-sys-color-on-secondary-container: #131c2b;

  /* Tertiary — warm rose */
  --md-sys-color-tertiary:           #705574;
  --md-sys-color-on-tertiary:        #ffffff;
  --md-sys-color-tertiary-container: #fad8fd;
  --md-sys-color-on-tertiary-container: #29132e;

  /* Error */
  --md-sys-color-error:              #ba1a1a;
  --md-sys-color-on-error:           #ffffff;
  --md-sys-color-error-container:    #ffdad6;
  --md-sys-color-on-error-container: #410002;

  /* Surfaces */
  --md-sys-color-surface:            #faf8ff;
  --md-sys-color-on-surface:         #1a1b20;
  --md-sys-color-surface-variant:    #e0e2ec;
  --md-sys-color-on-surface-variant: #44474f;
  --md-sys-color-surface-container-lowest:  #ffffff;
  --md-sys-color-surface-container-low:     #f4f3fb;
  --md-sys-color-surface-container:         #eeedf5;
  --md-sys-color-surface-container-high:    #e9e7f0;
  --md-sys-color-surface-container-highest: #e3e2ea;

  /* Outline */
  --md-sys-color-outline:            #74777f;
  --md-sys-color-outline-variant:    #c4c6d0;

  /* Inverse */
  --md-sys-color-inverse-surface:    #2f3036;
  --md-sys-color-inverse-on-surface: #f1f0f7;
  --md-sys-color-inverse-primary:    #adc6ff;

  /* Scrim & Shadow */
  --md-sys-color-scrim:              #000000;
  --md-sys-color-shadow:             #000000;

  /* ---------- Typography ---------- */
  --md-sys-typescale-display-font:   'Outfit', sans-serif;
  --md-sys-typescale-body-font:      'Inter', sans-serif;

  --md-sys-typescale-display-large:  57px;
  --md-sys-typescale-display-medium: 45px;
  --md-sys-typescale-display-small:  36px;
  --md-sys-typescale-headline-large: 32px;
  --md-sys-typescale-headline-medium:28px;
  --md-sys-typescale-headline-small: 24px;
  --md-sys-typescale-title-large:    22px;
  --md-sys-typescale-title-medium:   16px;
  --md-sys-typescale-title-small:    14px;
  --md-sys-typescale-body-large:     16px;
  --md-sys-typescale-body-medium:    14px;
  --md-sys-typescale-body-small:     12px;
  --md-sys-typescale-label-large:    14px;
  --md-sys-typescale-label-medium:   12px;
  --md-sys-typescale-label-small:    11px;

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

  /* ---------- Elevation (box-shadow) ---------- */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px 0 rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-sys-elevation-2: 0 1px 2px 0 rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px 0 rgba(0,0,0,.3);
  --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px 0 rgba(0,0,0,.3);
  --md-sys-elevation-5: 0 8px 12px 6px rgba(0,0,0,.15), 0 4px 4px 0 rgba(0,0,0,.3);

  /* ---------- Motion ---------- */
  --md-sys-motion-easing-standard:    cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized:  cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-duration-short:     200ms;
  --md-sys-motion-duration-medium:    400ms;
  --md-sys-motion-duration-long:      600ms;

  /* ---------- Spacing ---------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
}

/* ---------- Dark Theme ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --md-sys-color-primary:            #adc6ff;
  --md-sys-color-on-primary:         #072d6f;
  --md-sys-color-primary-container:  #1f4490;
  --md-sys-color-on-primary-container: #d8e2ff;

  --md-sys-color-secondary:          #bec6dc;
  --md-sys-color-on-secondary:       #283041;
  --md-sys-color-secondary-container:#3e4758;
  --md-sys-color-on-secondary-container: #dae2f9;

  --md-sys-color-tertiary:           #debce0;
  --md-sys-color-on-tertiary:        #3f2844;
  --md-sys-color-tertiary-container: #573e5c;
  --md-sys-color-on-tertiary-container: #fad8fd;

  --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:            #121318;
  --md-sys-color-on-surface:         #e3e2ea;
  --md-sys-color-surface-variant:    #44474f;
  --md-sys-color-on-surface-variant: #c4c6d0;
  --md-sys-color-surface-container-lowest:  #0d0e13;
  --md-sys-color-surface-container-low:     #1a1b20;
  --md-sys-color-surface-container:         #1e1f25;
  --md-sys-color-surface-container-high:    #282a2f;
  --md-sys-color-surface-container-highest: #33343a;

  --md-sys-color-outline:            #8e9099;
  --md-sys-color-outline-variant:    #44474f;

  --md-sys-color-inverse-surface:    #e3e2ea;
  --md-sys-color-inverse-on-surface: #2f3036;
  --md-sys-color-inverse-primary:    #3a5ba9;
}

/* Auto dark via system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --md-sys-color-primary:            #adc6ff;
    --md-sys-color-on-primary:         #072d6f;
    --md-sys-color-primary-container:  #1f4490;
    --md-sys-color-on-primary-container: #d8e2ff;

    --md-sys-color-secondary:          #bec6dc;
    --md-sys-color-on-secondary:       #283041;
    --md-sys-color-secondary-container:#3e4758;
    --md-sys-color-on-secondary-container: #dae2f9;

    --md-sys-color-tertiary:           #debce0;
    --md-sys-color-on-tertiary:        #3f2844;
    --md-sys-color-tertiary-container: #573e5c;
    --md-sys-color-on-tertiary-container: #fad8fd;

    --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:            #121318;
    --md-sys-color-on-surface:         #e3e2ea;
    --md-sys-color-surface-variant:    #44474f;
    --md-sys-color-on-surface-variant: #c4c6d0;
    --md-sys-color-surface-container-lowest:  #0d0e13;
    --md-sys-color-surface-container-low:     #1a1b20;
    --md-sys-color-surface-container:         #1e1f25;
    --md-sys-color-surface-container-high:    #282a2f;
    --md-sys-color-surface-container-highest: #33343a;

    --md-sys-color-outline:            #8e9099;
    --md-sys-color-outline-variant:    #44474f;

    --md-sys-color-inverse-surface:    #e3e2ea;
    --md-sys-color-inverse-on-surface: #2f3036;
    --md-sys-color-inverse-primary:    #3a5ba9;
  }
}