/* ============================================================
   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;
  --md-sys-typescale-label-micro: 10px;
  --md-sys-typescale-label-nano: 9px;

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

  /* ---------- Mini Loader (Light) ---------- */
  --mini-loader-bg: rgba(233, 227, 240, 0.85);
  --mini-loader-border: rgba(116, 119, 127, 0.15);
  --mini-loader-success-bg: rgba(216, 244, 222, 0.9);
  --mini-loader-success-border: rgba(46, 125, 50, 0.3);
  --mini-loader-success-icon: #2e7d32;
  --mini-loader-success-text: #1b5e20;
}

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

  /* ---------- Mini Loader (Dark) ---------- */
  --mini-loader-bg: rgba(40, 42, 47, 0.85);
  --mini-loader-border: rgba(142, 144, 153, 0.2);
  --mini-loader-success-bg: rgba(27, 54, 34, 0.9);
  --mini-loader-success-border: rgba(129, 199, 132, 0.3);
  --mini-loader-success-icon: #81c784;
  --mini-loader-success-text: #c8e6c9;
}

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

    /* ---------- Mini Loader (Dark) ---------- */
    --mini-loader-bg: rgba(40, 42, 47, 0.85);
    --mini-loader-border: rgba(142, 144, 153, 0.2);
    --mini-loader-success-bg: rgba(27, 54, 34, 0.9);
    --mini-loader-success-border: rgba(129, 199, 132, 0.3);
    --mini-loader-success-icon: #81c784;
    --mini-loader-success-text: #c8e6c9;
  }
}