/* ==========================================================================
   Design tokens — approved in Step 2 (style guide). Every color, type,
   spacing, radius, and shadow value used anywhere on the site is defined
   here as a CSS custom property. Nothing else should hard-code a hex value.
   ========================================================================== */

@font-face{
  font-family:'Sora'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../assets/fonts/sora-600.woff2') format('woff2');
}
@font-face{
  font-family:'Sora'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../assets/fonts/sora-700.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/plex-sans-400.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../assets/fonts/plex-sans-500.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../assets/fonts/plex-sans-600.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../assets/fonts/plex-mono-500.woff2') format('woff2');
}

:root{
  /* type */
  --font-display:'Sora', -apple-system, 'Segoe UI', sans-serif;
  --font-body:'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* spacing (8px rhythm) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  /* radius */
  --radius-s:6px; --radius-m:12px; --radius-l:20px;

  /* light theme (default) */
  --bg:#FBFAF7;
  --bg-elevated:#FFFFFF;
  --bg-sunken:#F3F1EB;
  --border:#E8E4DD;
  --text-primary:#10233D;
  --text-body:#333B47;
  --text-muted:#6E6858;
  --accent:#C1582E;
  --accent-hover:#9A4620;
  --accent-tint:#F5E4DA;
  --accent-tint-strong:#EACAB6;
  --brand-navy:#10233D;
  --brand-navy-deep:#0A1626;
  --brand-navy-2:#1B385A;
  --success:#2F7A52;
  --danger:#B23A3A;
  --shadow-color:16,35,61;
  --on-navy:#FFFFFF;
  --on-navy-muted:rgba(255,255,255,.65);
  /* Text/icon color for anything sitting on top of an --accent background
     (buttons, tags). Orange sits between the two themes' page background
     brightness, so what reads best on it flips: white in light mode,
     dark navy in dark mode (dark mode's brighter orange fails white text
     at ~3:1 — verified against WCAG AA 4.5:1). */
  --on-accent:#FFFFFF;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0B1420;
    --bg-elevated:#101F30;
    --bg-sunken:#0E1A29;
    --border:#23324A;
    --text-primary:#F3F1EC;
    --text-body:#D7DAE0;
    --text-muted:#93A0B3;
    --accent:#E07A4C;
    --accent-hover:#F09566;
    --accent-tint:rgba(224,122,76,.14);
    --accent-tint-strong:rgba(224,122,76,.28);
    --brand-navy:#16324F;
    --brand-navy-deep:#0B1420;
    --brand-navy-2:#1E4066;
    --shadow-color:0,0,0;
    --on-accent:#0B1420;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1420;
  --bg-elevated:#101F30;
  --bg-sunken:#0E1A29;
  --border:#23324A;
  --text-primary:#F3F1EC;
  --text-body:#D7DAE0;
  --text-muted:#93A0B3;
  --accent:#E07A4C;
  --accent-hover:#F09566;
  --accent-tint:rgba(224,122,76,.14);
  --accent-tint-strong:rgba(224,122,76,.28);
  --brand-navy:#16324F;
  --brand-navy-deep:#0B1420;
  --brand-navy-2:#1E4066;
  --shadow-color:0,0,0;
  --on-accent:#0B1420;
}
:root[data-theme="light"]{
  --bg:#FBFAF7;
  --bg-elevated:#FFFFFF;
  --bg-sunken:#F3F1EB;
  --border:#E8E4DD;
  --text-primary:#10233D;
  --text-body:#333B47;
  --text-muted:#6E6858;
  --accent:#C1582E;
  --accent-hover:#9A4620;
  --accent-tint:#F5E4DA;
  --accent-tint-strong:#EACAB6;
  --brand-navy:#10233D;
  --brand-navy-deep:#0A1626;
  --brand-navy-2:#1B385A;
  --shadow-color:16,35,61;
  --on-accent:#FFFFFF;
}