/* ============================================================
   wxstation — design tokens
   Dark "midnight navy" glass system. Borrows the meteokav.gr
   aesthetic direction (navy gradient + liquid glass) but is a
   self-contained token set for the station pages. Light theme
   is added later; dark is the only theme for now.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- Brand / accents ---- */
  --accent:        #4f90e0;   /* primary blue */
  --accent-2:      #6fb1ff;   /* lighter blue for glows/links */
  --accent-soft:   rgba(79, 144, 224, 0.16);
  --violet:        #7b6cf0;   /* secondary aurora */
  --good:          #46d18a;   /* live / rising */
  --warn:          #ffb454;   /* caution */
  --bad:           #ff6b6b;   /* offline / falling */

  /* ---- Page background (deep navy gradient) ---- */
  --bg-0:          #060a16;
  --bg-1:          #0a1326;
  --bg-2:          #0e1b35;
  --page-grad:     radial-gradient(1200px 720px at 18% -8%, #16264a 0%, rgba(22,38,74,0) 60%),
                   radial-gradient(1000px 680px at 100% 0%, #1a2348 0%, rgba(26,35,72,0) 55%),
                   linear-gradient(168deg, #0a1226 0%, #070c1a 52%, #05080f 100%);

  /* ---- Glass surfaces ---- */
  --glass-bg:      rgba(20, 32, 58, 0.55);
  --glass-bg-hi:   rgba(28, 44, 78, 0.66);
  --glass-bg-lo:   rgba(14, 24, 46, 0.46);
  --glass-brd:     rgba(120, 160, 230, 0.16);
  --glass-brd-hi:  rgba(150, 190, 255, 0.28);
  /* Blur is now used ONLY where there's real detail behind the glass (header +
     live pill over the banner photo, badges over the media thumbnails). Cards sit
     on the smooth page gradient, where a blur is visually indistinguishable from a
     plain translucent fill — so they use the fill instead (see .wxs-card). Radius
     trimmed 18→10px: blur cost scales with radius. Shadows tightened (a big blur
     radius is expensive to paint). Together this is a large GPU/battery saving. */
  --glass-blur:    10px;
  --glass-shadow:  0 8px 20px rgba(0, 0, 0, 0.36);
  --glass-shadow-lo: 0 5px 13px rgba(0, 0, 0, 0.26);
  --inset-hi:      inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ---- Text ---- */
  --txt-0:         #eaf1fb;   /* headline */
  --txt-1:         #c2cee0;   /* body */
  --txt-2:         #8a99b3;   /* muted */
  --txt-3:         #5f6f8c;   /* faint / captions */

  /* ---- Radii ---- */
  --r-sm:          10px;
  --r-md:          16px;
  --r-lg:          22px;
  --r-xl:          28px;

  /* ---- Layout ---- */
  --maxw:          1320px;
  --gutter:        clamp(14px, 3vw, 26px);
  --header-h:      64px;
  --gap:           clamp(12px, 1.6vw, 18px);

  /* ---- Type ---- */
  --font-inter: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-geologica: "Geologica", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font: var(--font-geologica);   /* ACTIVE UI font (Geologica); toggle to Inter via <html data-font="inter"> */
  --font-num: var(--font);

  /* ---- Temperature accent (set per-reading by JS) ---- */
  --temp-color: #ffb86b;
  --temp-glow:  rgba(255, 184, 107, 0.20);
}

/* ============================================================
   LIGHT THEME — "Daylight Sky" (opt-in via html[data-theme="light"]).
   Dark is the DEFAULT and stays entirely in :root above — with no
   attribute set the page is always dark, so nothing here can affect it.
   This block only re-maps token VALUES; components keep styling through
   the tokens. Guideline: no pure-white surfaces, no pure-black text.
   Accents are deepened for contrast on a light ground. Hardcoded colours
   that live outside these tokens get scoped overrides in style.css.
   ============================================================ */
:root[data-theme="light"] {
  color-scheme: light;

  /* ---- Brand / accents (deepened for light-ground contrast) ---- */
  --accent:        #2f78c8;
  --accent-2:      #2f78c8;
  --accent-soft:   rgba(47, 120, 200, 0.12);
  --violet:        #6a5ae0;
  --good:          #1f9d68;
  --warn:          #c9821c;
  --bad:           #d84c4c;

  /* ---- Page background (soft sky gradient, never pure white) ---- */
  --bg-0:          #e0e9f6;
  --bg-1:          #e7eef9;
  --bg-2:          #eef4fc;
  --page-grad:     radial-gradient(1200px 720px at 18% -8%, #dbe8fb 0%, rgba(219,232,251,0) 60%),
                   radial-gradient(1000px 680px at 100% 0%, #e5edfb 0%, rgba(229,237,251,0) 55%),
                   linear-gradient(168deg, #eef4fc 0%, #e7eef9 52%, #e0e9f6 100%);

  /* ---- Glass surfaces (frosted pale blue, tinted off-white) ---- */
  --glass-bg:      rgba(247, 251, 255, 0.66);
  --glass-bg-hi:   rgba(250, 252, 255, 0.82);
  --glass-bg-lo:   rgba(240, 246, 253, 0.55);
  --glass-brd:     rgba(70, 110, 175, 0.20);
  --glass-brd-hi:  rgba(55, 100, 170, 0.34);
  --glass-shadow:  0 10px 24px rgba(40, 66, 110, 0.12);
  --glass-shadow-lo: 0 6px 14px rgba(40, 66, 110, 0.10);
  --inset-hi:      inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---- Text (deep navy → muted, never pure black) — txt-2/3 deepened
          2026-08-09 for AA-readable muted text on the pale cards ---- */
  --txt-0:         #33425c;   /* softened from #182437 (aggressive near-black) for a friendlier light theme */
  --txt-1:         #39475f;
  --txt-2:         #4d5b74;   /* was #63728c (~4:1) → ~6.4:1 */
  --txt-3:         #5c6a83;   /* was #93a0b4 (~2.2:1) → ~5.1:1 */

  /* ---- Temperature accent default (JS overrides per reading;
          light needs a deeper ramp — handled in colorscale.js) ---- */
  --temp-color: #e07d2c;
  --temp-glow:  rgba(224, 125, 44, 0.14);
}

/* ============================================================
   GRAPHITE — alternative DARK theme (opt-in). A near-black / neutral-gray
   palette in the spirit of a modern app UI. It is NOT a separate data-theme:
   it RIDES ON the dark theme (the page keeps data-theme="dark") and a
   data-variant="graphite" flag only re-maps the colour TOKEN VALUES, so every
   dark-scoped rule + component style still applies untouched. The two-attribute
   selector means it can ONLY take effect in dark — navy and light are
   structurally unaffected. Accents stay brand-blue (they pop on graphite).
   ============================================================ */
:root[data-theme="dark"][data-variant="graphite"] {
  color-scheme: dark;

  /* ---- Page background: near-black with soft neutral-gray glows (no navy) ---- */
  --bg-0: #0b0b0d;
  --bg-1: #121214;
  --bg-2: #17171a;
  --page-grad: radial-gradient(1200px 720px at 18% -8%, #1d1d21 0%, rgba(29,29,33,0) 60%),
               radial-gradient(1000px 680px at 100% 0%, #201f24 0%, rgba(32,31,36,0) 55%),
               linear-gradient(168deg, #141416 0%, #0e0e10 52%, #0a0a0b 100%);

  /* ---- Glass surfaces: charcoal translucent + neutral light borders ---- */
  --glass-bg:      rgba(34, 34, 38, 0.58);
  --glass-bg-hi:   rgba(46, 46, 51, 0.68);
  --glass-bg-lo:   rgba(25, 25, 28, 0.48);
  --glass-brd:     rgba(184, 186, 194, 0.12);
  --glass-brd-hi:  rgba(205, 207, 215, 0.24);
  --glass-shadow:    0 8px 22px rgba(0, 0, 0, 0.55);
  --glass-shadow-lo: 0 5px 14px rgba(0, 0, 0, 0.42);
  --inset-hi:      inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* ---- Text: neutral off-white → gray (no blue cast) ---- */
  --txt-0: #ededf0;
  --txt-1: #c6c7cc;
  --txt-2: #8e9098;
  --txt-3: #66686f;

  /* ---- Accents: brand blue, a touch brighter for the graphite ground ---- */
  --accent:      #5b9bec;
  --accent-2:    #7fb4ff;
  --accent-soft: rgba(91, 155, 236, 0.16);
  --violet:      #8b7cf5;
  --good:        #46d18a;
  --warn:        #ffb454;
  --bad:         #ff6b6b;
}


/* font switch (future settings toggle) — Inter stays loaded as the alternative; Syne headlines unaffected */
:root[data-font="inter"]{ --font: var(--font-inter); }