/* ==========================================================================
   RadarHero design tokens
   --------------------------------------------------------------------------
   Corporate design source: esp32-csi-tool/_components/web_ui/src/style.css
     primary  #162F3A   deep petrol
     accent   #9349FA   violet
     surface  #FCF4EF   warm cream
     radius   24px on containers

   Type rule (documented, applied everywhere):
     - Montserrat is reserved for the RADARHERO wordmark only.
     - Geist carries all display, UI and body text.
     - Geist Mono carries figures and technical labels.

   Radius rule (documented, applied everywhere):
     - panels 24px, cards 18px, media 14px, controls 10px, pills 999px.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-200.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/GeistMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- Brand constants ------------------------------------------------------ */

:root {
  --brand-petrol: #162f3a;
  --brand-violet: #9349fa;
  --brand-cream: #fcf4ef;

  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-wordmark: "Montserrat", var(--font-sans);

  --radius-panel: 24px;
  --radius-card: 18px;
  --radius-media: 14px;
  --radius-control: 10px;
  --radius-pill: 999px;

  --shell: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);

  /* Springs, per Apple's damping/response model. Critically damped by
     default; the softer curve is reserved for momentum-carrying moments. */
  --ease-settle: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-tap: 110ms;
  --dur-ui: 320ms;
  --dur-reveal: 620ms;

  --z-nav: 100;
  --z-drawer: 110;
  --z-grain: 120;
}

/* --- Light theme (default) ------------------------------------------------ */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  --surface: #fcf4ef;
  --surface-sunken: #f5ebe4;
  --surface-raised: #fffbf8;
  --surface-invert: #162f3a;
  --surface-invert-raised: #1e3d4a;

  --ink: #162f3a;
  --ink-muted: #4d6570;
  --ink-faint: #5a6e7a;
  --ink-invert: #f6efe9;
  --ink-invert-muted: #a9bcc4;

  --line: rgb(22 47 58 / 0.14);
  --line-strong: rgb(22 47 58 / 0.28);
  --line-invert: rgb(255 255 255 / 0.16);

  /* accent-fill always carries white text at 4.6:1.
     accent-text is the readable-on-surface variant. */
  --accent-fill: #9349fa;
  --accent-fill-hover: #8134f0;
  --accent-text: #7526e0;
  --accent-soft: rgb(147 73 250 / 0.1);
  --accent-soft-strong: rgb(147 73 250 / 0.18);
  --on-accent: #ffffff;

  --danger-text: #a8231c;
  --danger-soft: rgb(168 35 28 / 0.09);
  --success-text: #16694a;
  --success-soft: rgb(22 105 74 / 0.1);

  --glass: rgb(252 244 239 / 0.72);
  --shadow-card: 0 1px 2px rgb(22 47 58 / 0.05), 0 12px 32px rgb(22 47 58 / 0.07);
  --shadow-panel: 0 2px 6px rgb(22 47 58 / 0.06), 0 28px 72px rgb(22 47 58 / 0.13);
  --shadow-lift: 0 2px 4px rgb(22 47 58 / 0.07), 0 20px 44px rgb(22 47 58 / 0.14);
}

/* --- Dark theme ----------------------------------------------------------- */

:root[data-theme="dark"] {
  color-scheme: dark;

  --surface: #0d1a21;
  --surface-sunken: #091419;
  --surface-raised: #142b35;
  --surface-invert: #1c3947;
  --surface-invert-raised: #23485a;

  --ink: #f0e9e4;
  --ink-muted: #a6bac3;
  --ink-faint: #8ca1ab;
  --ink-invert: #f6efe9;
  --ink-invert-muted: #b3c5cd;

  --line: rgb(240 233 228 / 0.14);
  --line-strong: rgb(240 233 228 / 0.28);
  --line-invert: rgb(255 255 255 / 0.16);

  --accent-fill: #9349fa;
  --accent-fill-hover: #a163ff;
  --accent-text: #b98cff;
  --accent-soft: rgb(147 73 250 / 0.16);
  --accent-soft-strong: rgb(147 73 250 / 0.26);
  --on-accent: #ffffff;

  --danger-text: #ff9c94;
  --danger-soft: rgb(255 120 110 / 0.12);
  --success-text: #6ddaad;
  --success-soft: rgb(109 218 173 / 0.12);

  --glass: rgb(13 26 33 / 0.72);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.34);
  --shadow-panel: 0 2px 6px rgb(0 0 0 / 0.4), 0 28px 72px rgb(0 0 0 / 0.46);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.45), 0 20px 44px rgb(0 0 0 / 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --surface: #0d1a21;
    --surface-sunken: #091419;
    --surface-raised: #142b35;
    --surface-invert: #1c3947;
    --surface-invert-raised: #23485a;

    --ink: #f0e9e4;
    --ink-muted: #a6bac3;
    --ink-faint: #8ca1ab;

    --line: rgb(240 233 228 / 0.14);
    --line-strong: rgb(240 233 228 / 0.28);

    --accent-fill-hover: #a163ff;
    --accent-text: #b98cff;
    --accent-soft: rgb(147 73 250 / 0.16);
    --accent-soft-strong: rgb(147 73 250 / 0.26);

    --danger-text: #ff9c94;
    --danger-soft: rgb(255 120 110 / 0.12);
    --success-text: #6ddaad;
    --success-soft: rgb(109 218 173 / 0.12);

    --glass: rgb(13 26 33 / 0.72);
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.34);
    --shadow-panel: 0 2px 6px rgb(0 0 0 / 0.4), 0 28px 72px rgb(0 0 0 / 0.46);
    --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.45), 0 20px 44px rgb(0 0 0 / 0.5);
  }
}