/* ============================================================
 * 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.
 * ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&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:#87D0FD;
  /* Text-label variant of --sky. The bright light-blue above has ~10:1 contrast on Twilight/Dark
     but only ~1.7:1 against Light theme's white panel -- fine for the "Low" temperature line or
     the day-band fill (non-text, same 1.4.11 looser standard as the humidity bars), but several
     hover labels use this same color as actual text (dew point, precip %, low temp), which needs
     the stricter 4.5:1 text-contrast standard. Keeping this separate from --sky itself avoids
     changing the chart lines/fills that don't need it. */
  --sky-text:var(--sky);
  --blue-hour:#183EFA;
  --night:#060819;
  --elev-curve:var(--ink);
  /* Teal-green accent, shared by "Happening now" text (Today view cards) and the humidity
     bars/labels in the 24-hour and 14-day forecast charts. Excellent contrast on Twilight/Dark
     (measured ~9.5:1 against both panel backgrounds), but the same light shade only gets ~1.8:1
     against Light theme's white panel -- well below readable. The light-theme override below is
     a darker shade in the same teal-green family, not a different color, so it still reads as
     "the same green" when switching themes. */
  --now-green:#7FD1AE;
  --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;

  /* Card accents for the three twilight-band cards on the Today view. These
     are deliberately separate from --twilight-civil/nautical/astro above:
     those stay dark/subtle on purpose for the graph band-shading, but that
     same darkness makes them nearly invisible as a card border/wash against
     a dark panel background. These are tuned for visibility on a dark
     background instead. The light theme below uses its own distinct set
     rather than reusing --twilight-civil/nautical/astro directly -- those
     three are all near-black and, while individually readable against white,
     are too close to each other to tell apart once diluted into a thin
     border + faint wash. */
  --card-twilight-civil:#9D8CE0;
  --card-twilight-nautical:#7C6FE0;
  --card-twilight-astro:#5B4FD6;

  /* Graph-only twilight colors. The --card-twilight-* set above reads as purple/lavender
     (red channel higher than green -- a classic violet tint), which looks fine as a card
     accent but clashes with blue hour's and night's true-blue character on the graphs. These
     stay in the same blue family as --blue-hour and --night (green channel higher than red),
     forming a smooth dusk-to-night progression instead of a jarring hue shift. */
  --graph-twilight-civil:#3F5FA0;
  --graph-twilight-nautical:#1D2E5C;
  --graph-twilight-astro:#0F1830;
  --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;
  --card-twilight-civil:#7C4DFF;
  --card-twilight-nautical:#5B4FD6;
  --card-twilight-astro:#3730A3;
  /* --ink is near-black here for text contrast on white, but the elevation curve also has to
     cross the dark navy --night band -- against that, near-black reads as almost invisible
     (contrast ~1.2:1). This dark gray keeps solid contrast against both white and navy. */
  --elev-curve:#46474A;
  --now-green:#0F7A4D;
  --sky-text:#1A5FA8;
}