/* ==========================================================================
   Oddech — design tokens (the ONLY place where raw colours, sizes and timings live)
   Every other stylesheet and every JS colour must reference these variables
   (JS: web/js/design/tokens.js mirrors the data palettes for canvas/WebGL).
   Theme: <html data-theme="light|dark|auto">; "auto" follows the OS.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 44px;
  --fs-display: clamp(38px, 6.2vw, 76px);
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-base: 1.55;
  --tracking-tight: -0.022em;
  --tracking-display: -0.038em;
  --tracking-caps: 0.08em;

  /* ---- Space (4 px grid), radii, layout ------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --s-16: 64px; --s-20: 80px;
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --appbar-h: 64px;
  --tabbar-h: 64px;
  --page-max: 1360px;
  --page-pad: clamp(16px, 4vw, 40px);
  --gap: clamp(12px, 1.6vw, 20px);

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 600ms;

  /* ---- Surfaces & text (light) ----------------------------------------- */
  --bg: #F4F5F8;
  --bg-elev: #FAFBFC;
  --surface: #FFFFFF;
  --surface-2: #F6F7F9;
  --surface-3: #EEF0F4;
  --surface-glass: rgba(255, 255, 255, .74);
  --surface-glass-strong: rgba(255, 255, 255, .9);
  --overlay: rgba(10, 14, 22, .42);
  --border: rgba(15, 23, 42, .08);
  --border-strong: rgba(15, 23, 42, .15);
  --divider: rgba(15, 23, 42, .06);
  --text: #0B1220;
  --text-2: #2B3445;
  --text-muted: #5F6B7E;
  --text-faint: #8E98A8;
  --text-on-accent: #FFFFFF;

  /* ---- Brand ------------------------------------------------------------ */
  --accent: #5A4FF3;
  --accent-hover: #4B40E6;
  --accent-2: #2EA6FF;
  --accent-soft: rgba(90, 79, 243, .10);
  --accent-softer: rgba(90, 79, 243, .06);
  --accent-ring: rgba(90, 79, 243, .34);
  --brand-gradient: linear-gradient(135deg, #5A4FF3 0%, #2EA6FF 100%);
  --brand-gradient-text: linear-gradient(100deg, #5A4FF3 0%, #2E8BFF 55%, #19B9A6 100%);
  --aurora-1: rgba(90, 79, 243, .20);
  --aurora-2: rgba(46, 166, 255, .18);
  --aurora-3: rgba(25, 185, 166, .14);

  /* ---- UI status (NOT data) -------------------------------------------- */
  --ok: #12936A;
  --ok-soft: rgba(18, 147, 106, .11);
  --warn: #C27803;
  --warn-soft: rgba(194, 120, 3, .12);
  --bad: #D8343F;
  --bad-soft: rgba(216, 52, 63, .10);
  --info: #2E7DD7;
  --info-soft: rgba(46, 125, 215, .10);

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-xs: 0 1px 1px rgba(15, 23, 42, .04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .03);
  --shadow-md: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 28px -12px rgba(15, 23, 42, .16);
  --shadow-lg: 0 2px 6px rgba(15, 23, 42, .05), 0 28px 56px -20px rgba(15, 23, 42, .28);
  --shadow-glow: 0 0 0 1px rgba(90, 79, 243, .18), 0 12px 32px -12px rgba(90, 79, 243, .45);
  --blur: saturate(160%) blur(18px);

  /* ---- DATA: Polish air-quality index (GIOŚ official legend colours) ----
     0 bardzo dobry · 1 dobry · 2 umiarkowany · 3 dostateczny · 4 zły · 5 bardzo zły */
  --aq-0: #57B108;
  --aq-1: #B0DD10;
  --aq-2: #FFD911;
  --aq-3: #E58100;
  --aq-4: #E50000;
  --aq-5: #990000;
  --aq-none: #BFBFBF;
  --aq-0-ink: #FFFFFF; --aq-1-ink: #1E2A05; --aq-2-ink: #2E2600;
  --aq-3-ink: #FFFFFF; --aq-4-ink: #FFFFFF; --aq-5-ink: #FFFFFF; --aq-none-ink: #2B2B2B;

  /* ---- DATA: norm-aligned sequential classes (clean -> polluted) --------
     c0 <= WHO guideline · c1 <= EU-2030 limit · c2 · c3 · c4 <= current EU limit · c5 above.
     Lightness falls monotonically, hues avoid a pure green/red pair (colour-blind safer). */
  --seq-0: #8FDCBF;
  --seq-1: #F4E07A;
  --seq-2: #F5B051;
  --seq-3: #EA7643;
  --seq-4: #C93B4B;
  --seq-5: #74204F;
  --seq-none: #C9CED6;

  /* ---- DATA: diverging trend classes (%/yr; improvement = blue) -------- */
  --div-n3: #1D6FB8;
  --div-n2: #5DA0D5;
  --div-n1: #B3D5EC;
  --div-0:  #E3E6EA;
  --div-p1: #F6C2A8;
  --div-p2: #E97B5E;
  --div-p3: #C42C3A;

  /* ---- DATA: pollutant identity colours (multi-series charts, dots) ---- */
  --pol-PM10: #F08C2E;
  --pol-PM25: #E2496A;
  --pol-NO2:  #3B7BF6;
  --pol-NOx:  #7C8CF8;
  --pol-NO:   #9DB9F9;
  --pol-O3:   #12B3A6;
  --pol-SO2:  #A35BF0;
  --pol-CO:   #64748B;
  --pol-C6H6: #2FB45A;
  --pol-BaP:  #A86B1E;
  --pol-metal: #8B8F9C;

  /* ---- DATA: seasons (meteorological: DJF, MAM, JJA, SON) --------------- */
  --season-winter: #4C7DF0;
  --season-spring: #2FB45A;
  --season-summer: #F0A12E;
  --season-autumn: #D8577A;

  /* ---- DATA: categorical series (compare view: up to 4 stations; mid-tones that read in both themes) */
  --series-1: #5A4FF3;
  --series-2: #F08C2E;
  --series-3: #12B3A6;
  --series-4: #E2496A;

  /* ---- Charts & map ----------------------------------------------------- */
  --chart-grid: rgba(15, 23, 42, .07);
  --chart-axis: rgba(15, 23, 42, .18);
  --chart-label: #6B7588;
  --chart-ref-line: rgba(15, 23, 42, .38);      /* limit / guideline reference lines */
  --chart-band: rgba(90, 79, 243, .12);          /* CI / IQR bands */
  --chart-hatch: rgba(15, 23, 42, .18);          /* incomplete years */
  --map-water: #DCE6F2;
  --map-land-out: #EEF1F5;
  --map-land: #FFFFFF;
  --map-border-out: rgba(15, 23, 42, .10);
  --map-border: rgba(15, 23, 42, .16);
  --map-outline: rgba(15, 23, 42, .38);
  --marker-stroke: rgba(255, 255, 255, .95);
  --marker-halo: rgba(15, 23, 42, .20);
}

/* ---- Dark theme --------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #090C12;
  --bg-elev: #0D1118;
  --surface: #11161E;
  --surface-2: #151B25;
  --surface-3: #1B2230;
  --surface-glass: rgba(17, 22, 30, .72);
  --surface-glass-strong: rgba(17, 22, 30, .9);
  --overlay: rgba(0, 0, 0, .55);
  --border: rgba(255, 255, 255, .07);
  --border-strong: rgba(255, 255, 255, .14);
  --divider: rgba(255, 255, 255, .05);
  --text: #EAEEF5;
  --text-2: #C8D0DC;
  --text-muted: #94A0B2;
  --text-faint: #667186;
  --accent: #7C73FF;
  --accent-hover: #8F87FF;
  --accent-2: #4DB5FF;
  --accent-soft: rgba(124, 115, 255, .16);
  --accent-softer: rgba(124, 115, 255, .08);
  --accent-ring: rgba(124, 115, 255, .45);
  --brand-gradient: linear-gradient(135deg, #7C73FF 0%, #4DB5FF 100%);
  --brand-gradient-text: linear-gradient(100deg, #A39DFF 0%, #6EC3FF 55%, #4FD8C4 100%);
  --aurora-1: rgba(124, 115, 255, .22);
  --aurora-2: rgba(77, 181, 255, .16);
  --aurora-3: rgba(79, 216, 196, .12);
  --ok: #3CCB98; --ok-soft: rgba(60, 203, 152, .14);
  --warn: #F0B23E; --warn-soft: rgba(240, 178, 62, .14);
  --bad: #FF6B73; --bad-soft: rgba(255, 107, 115, .14);
  --info: #5EA8FF; --info-soft: rgba(94, 168, 255, .14);
  --shadow-xs: 0 1px 1px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 30px 60px -20px rgba(0, 0, 0, .75);
  --shadow-glow: 0 0 0 1px rgba(124, 115, 255, .3), 0 12px 36px -12px rgba(124, 115, 255, .55);
  --seq-none: #3A4252;
  --div-0: #3A4250;
  --chart-grid: rgba(255, 255, 255, .06);
  --chart-axis: rgba(255, 255, 255, .16);
  --chart-label: #8D98AA;
  --chart-ref-line: rgba(255, 255, 255, .42);
  --chart-band: rgba(124, 115, 255, .18);
  --chart-hatch: rgba(255, 255, 255, .16);
  --map-water: #070A0F;
  --map-land-out: #10141B;
  --map-land: #161C26;
  --map-border-out: rgba(255, 255, 255, .05);
  --map-border: rgba(255, 255, 255, .11);
  --map-outline: rgba(255, 255, 255, .32);
  --marker-stroke: rgba(9, 12, 18, .92);
  --marker-halo: rgba(0, 0, 0, .5);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --bg: #090C12; --bg-elev: #0D1118; --surface: #11161E; --surface-2: #151B25; --surface-3: #1B2230;
    --surface-glass: rgba(17, 22, 30, .72); --surface-glass-strong: rgba(17, 22, 30, .9); --overlay: rgba(0, 0, 0, .55);
    --border: rgba(255, 255, 255, .07); --border-strong: rgba(255, 255, 255, .14); --divider: rgba(255, 255, 255, .05);
    --text: #EAEEF5; --text-2: #C8D0DC; --text-muted: #94A0B2; --text-faint: #667186;
    --accent: #7C73FF; --accent-hover: #8F87FF; --accent-2: #4DB5FF;
    --accent-soft: rgba(124, 115, 255, .16); --accent-softer: rgba(124, 115, 255, .08); --accent-ring: rgba(124, 115, 255, .45);
    --brand-gradient: linear-gradient(135deg, #7C73FF 0%, #4DB5FF 100%);
    --brand-gradient-text: linear-gradient(100deg, #A39DFF 0%, #6EC3FF 55%, #4FD8C4 100%);
    --aurora-1: rgba(124, 115, 255, .22); --aurora-2: rgba(77, 181, 255, .16); --aurora-3: rgba(79, 216, 196, .12);
    --ok: #3CCB98; --ok-soft: rgba(60, 203, 152, .14); --warn: #F0B23E; --warn-soft: rgba(240, 178, 62, .14);
    --bad: #FF6B73; --bad-soft: rgba(255, 107, 115, .14); --info: #5EA8FF; --info-soft: rgba(94, 168, 255, .14);
    --shadow-xs: 0 1px 1px rgba(0, 0, 0, .3); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 30px 60px -20px rgba(0, 0, 0, .75);
    --shadow-glow: 0 0 0 1px rgba(124, 115, 255, .3), 0 12px 36px -12px rgba(124, 115, 255, .55);
    --seq-none: #3A4252; --div-0: #3A4250;
    --chart-grid: rgba(255, 255, 255, .06); --chart-axis: rgba(255, 255, 255, .16); --chart-label: #8D98AA;
    --chart-ref-line: rgba(255, 255, 255, .42); --chart-band: rgba(124, 115, 255, .18); --chart-hatch: rgba(255, 255, 255, .16);
    --map-water: #070A0F; --map-land-out: #10141B; --map-land: #161C26;
    --map-border-out: rgba(255, 255, 255, .05); --map-border: rgba(255, 255, 255, .11); --map-outline: rgba(255, 255, 255, .32);
    --marker-stroke: rgba(9, 12, 18, .92); --marker-halo: rgba(0, 0, 0, .5);
  }
}