/* ============================================================
 * Design tokens
 * Color palette (per theme), fonts, radius, and the spacing scale. Everything else references these -- change a value here, not in the component files.
 * ============================================================ */

@font-face{ font-family:'Fraunces'; src:url('../fonts/fraunces-v38-latin-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Fraunces'; src:url('../fonts/fraunces-v38-latin-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Fraunces'; src:url('../fonts/fraunces-v38-latin-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Fraunces'; src:url('../fonts/fraunces-v38-latin-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('../fonts/inter-v20-latin-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('../fonts/inter-v20-latin-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('../fonts/inter-v20-latin-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-v20-latin-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-v20-latin-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-v20-latin-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

:root{
  --bg-deep:#0E1330;
  --bg-panel:#161B3E;
  --bg-panel-2:#1D2350;
  --bg-raised:#242A5C;
  --line:#333A66;
  --line-soft:#262C55;
  --ink:#F3EFE4;
  --ink-dim:#A9AECF;
  --ink-faint:#7175A0;
  --gold:#F2B65C;
  --gold-dim:#8C7440;
  --coral:#E2603A;
  --sky:#6FA8D8;
  --night:#060819;
  --input-bg:var(--night);
  --link:var(--sky);
  --table-today-tint:#202034;
  --table-now-tint:#19263D;
  --twilight-civil:#242A5C;
  --twilight-nautical:#1A2150;
  --twilight-astro:#12183B;
  --moon-phase:#9CA3C4;
  --radius:12px;
  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  /* Spacing scale. Use these (or the mt.-/mb.- utilities) in base.css for any
     new margin/padding instead of one-off pixel values -- this is what the
     sidebar-panel-gap / forecast-gap / chart-table-gap discussions kept
     colliding on before this scale existed. */

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
}
:root[data-theme="dark"]{
  --bg-deep:#121212;
  --bg-panel:#1B1B1B;
  --bg-panel-2:#232323;
  --bg-raised:#2C2C2C;
  --line:#3A3A3A;
  --line-soft:#2A2A2A;
  --ink:#EDEDED;
  --ink-dim:#B0B0B0;
  --ink-faint:#828282;
  --input-bg:#0A0A0A;
  --table-today-tint:#241F18;
  --table-now-tint:#1D2522;
}
:root[data-theme="light"]{
  --bg-deep:#F6F6F9;
  --bg-panel:#FFFFFF;
  --bg-panel-2:#F0F1F5;
  --bg-raised:#E7E9F0;
  --line:#D7D9E2;
  --line-soft:#E5E6ED;
  --ink:#1D2033;
  --ink-dim:#4B4F68;
  --ink-faint:#767A93;
  --input-bg:#FFFFFF;
  --link:#2B6CB0;
  --table-today-tint:#F6F1EC;
  --table-now-tint:#EAF2F2;
}