/* =====================================================================
   THEME TOKENS — the single source of truth for the app's look & feel.

   Edit ONLY this file to retheme the whole application: backgrounds,
   text, cards, AND the ECharts graphs (the JS reads these same variables
   via getComputedStyle). No recompilation needed — it is plain CSS.

   Swap the values below for a light theme, a different palette, etc.
   ===================================================================== */
:root {
  /* Backgrounds */
  --wx-bg-top: #0b1736;
  --wx-bg-bottom: #1b2c54;
  --wx-surface: #16213f;          /* solid panels (dropdown, modal) */
  --wx-surface-2: #101a30;

  /* Text */
  --wx-text: #eaf0ff;
  --wx-muted: rgba(234, 240, 255, 0.62);
  --wx-faint: rgba(234, 240, 255, 0.40);
  --wx-on-accent: #16233f;        /* text drawn on an accent fill */

  /* Cards / surfaces */
  --wx-card-bg: rgba(255, 255, 255, 0.06);
  --wx-card-border: rgba(255, 255, 255, 0.10);
  --wx-hover: rgba(255, 255, 255, 0.06);
  --wx-radius: 20px;
  --wx-radius-sm: 14px;
  --wx-maxw: 468px;

  /* Accents (drive both UI and charts) */
  --wx-accent-cold: #5eb6ff;      /* cold temps / rain */
  --wx-accent-warm: #f6a13c;      /* warm temps */
  --wx-prob: #78c8ff;             /* precipitation-probability line */

  /* Chart chrome (consumed by ECharts via getComputedStyle) */
  --wx-axis-label: rgba(255, 255, 255, 0.45);
  --wx-grid-line: rgba(255, 255, 255, 0.08);
  --wx-tooltip-bg: rgba(13, 21, 40, 0.96);
  --wx-tooltip-border: rgba(255, 255, 255, 0.12);
  --wx-marker: #ffffff;           /* H / L points on the day curve */
}