/* ================================================================
   ir-tokens.css — IndiaRealTime design tokens
   Color + typography system. Drop-in :root file — load before
   ir-home.css / ir-home-v2.css so those can consume these vars.
   All contrast numbers verified with WCAG relative-luminance math;
   AQI/price hues verified for CVD-adjacent separation (OKLab ΔE).
   ================================================================ */

:root {
  color-scheme: light;

  /* ── Brand (saffron) — logo, primary buttons, links, active state ONLY.
     Never for data values. Raw --brand fails text contrast; use the
     -text variant for links/body-size saffron text. ───────────────── */
  --brand:            #FF6200; /* logo mark, button fill, active-state bg/border */
  --brand-hover:      #E85800; /* button hover/pressed */
  --brand-text:       #A83D0A; /* links & saffron body text — AA on canvas AND surface */
  --brand-tint-100:   #FFE3D1; /* light tint bg (badges, hover washes) */
  --brand-tint-50:    #FFF3EA; /* faint tint bg */
  --on-brand:         #1A1C22; /* text ON a --brand-filled button (see rationale: don't use white) */

  /* ── Canvas & surfaces — warm, not pure white, to cut glare ──────── */
  --canvas:            #F4F3EF; /* page background */
  --surface:           #FFFDFA; /* card/row background — warm, not #fff */
  --surface-2:         #ECEAE4; /* recessed/alt surface (table stripe, well) */
  --border:            #E5E3DC; /* hairline borders */
  --border-strong:     #C9C6BC; /* input borders, dividers that need to read */

  /* ── Text — near-black, not pure black ────────────────────────────── */
  --ink:               #1A1C22; /* primary text — 15.3:1 on canvas */
  --ink-secondary:     #5B5650; /* secondary text (timestamps, sub-labels) — 6.5:1 on canvas, AA-safe */
  --ink-muted:         #8A8478; /* decorative-only (icons, dividers) — 3.3:1, NOT for text conveying meaning */
  --ink-on-dark:       #FFFFFF;

  /* ── AQI severity scale — CPCB's real 6 bands (good/satisfactory/moderate/
     poor/very-poor/severe — matches ir_aqi_cls()/irloc_aqi_cls()/ir_svc_aqi_cls()
     in the PHP templates exactly, so no class-name changes needed anywhere).
     FIXED. Reserved for AQI only — never reuse for branding, decoration, or
     any other data type. Each step ships its required text color for AA. ── */
  --aqi-good:          #157F3C;  --aqi-good-text:          #FFFFFF; /* 5.08:1 */
  --aqi-satisfactory:  #96A800;  --aqi-satisfactory-text:  #1A1C22; /* 6.40:1 */
  --aqi-moderate:      #FFB300;  --aqi-moderate-text:      #1A1C22; /* 9.49:1 */
  --aqi-poor:          #F0700A;  --aqi-poor-text:          #1A1C22; /* 5.70:1 */
  --aqi-very-poor:     #C62828;  --aqi-very-poor-text:     #FFFFFF; /* 5.62:1 */
  --aqi-severe:        #6B1414;  --aqi-severe-text:        #FFFFFF; /* 12.10:1 */

  /* ── Price movement — distinct hue family from the AQI scale ─────── */
  --price-up:          #0B7A6B; /* teal-green, not AQI grass-green — 4.72:1 canvas / 5.24:1 surface */
  --price-down:        #99204A; /* crimson, not AQI orange-red — 6.7:1 canvas / 7.9:1 surface */
  --price-flat:        #5B5650; /* = --ink-secondary, no directional color implied */

  /* ── Fonts ─────────────────────────────────────────────────────────
     UI/headings: system stack only — zero bytes downloaded, resolves
     to Roboto on virtually every Android device this audience uses.
     Data figures: one self-hosted mono, tabular, for column alignment.
     Swap --font-ui for Noto Sans (+ script-specific Noto Sans <Script>)
     when Hindi/Tamil/Bengali/etc. localization ships — see rationale. */
  --font-ui:   system-ui, -apple-system, Roboto, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Roboto Mono", "SFMono-Regular", monospace;

  /* ── Type scale — sizes / weights / line-heights ──────────────────── */
  --fs-display:   28px; --lh-display:   1.2;  --fw-display:   600; /* page hero number, rare */
  --fs-h1:        22px; --lh-h1:        1.25; --fw-h1:        600;
  --fs-h2:        18px; --lh-h2:        1.3;  --fw-h2:        600;
  --fs-h3:        15px; --lh-h3:        1.35; --fw-h3:        600;
  --fs-body:      15px; --lh-body:      1.6;  --fw-body:      400;
  --fs-body-sm:   13px; --lh-body-sm:   1.5;  --fw-body-sm:   400;
  --fs-caption:   12px; --lh-caption:   1.4;  --fw-caption:   500;

  /* data figures — always pair with --font-mono + tabular-nums */
  --fs-data-lg:   24px; --lh-data-lg:   1.2;  --fw-data-lg:   600; /* hero temp/price */
  --fs-data-md:   16px; --lh-data-md:   1.3;  --fw-data-md:   600; /* card/row value */
  --fs-data-sm:   13px; --lh-data-sm:   1.4;  --fw-data-sm:   500; /* inline/table cell */

  /* ── Spacing (4px base) & radius ───────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  --radius-s: 8px; --radius-m: 12px; --radius-l: 20px; --radius-pill: 999px;

  --shadow-1: 0 1px 4px rgba(26,28,34,.06), 0 4px 12px rgba(26,28,34,.05);
  --shadow-2: 0 12px 36px rgba(26,28,34,.16);

  /* ── Legacy aliases — ir-home.css / ir-home-v2.css reference these names
     directly in ~60 rules; aliasing here (once) instead of touching every
     rule. Do not add new color literals below this line — point new legacy
     names at the canonical tokens above. Decorative-only colors (--gd gold
     ribbon accent, --gn flag-green card accent, --nv hero gradient navy) are
     deliberately NOT aliased to AQI/price tokens — they never encoded
     severity or direction, so they keep their own literal values. ──────── */
  --sf:            var(--brand);
  --sf-d:          var(--brand-hover);
  --bl:            var(--brand); /* pre-existing alias: this "blue" slot already carries saffron site-wide */
  --gd:            #F59E0B; /* decorative gold accent — kept independent of --aqi-moderate */
  --gn:            #138808; /* decorative flag-green accent — kept independent of --price-up/--aqi-good */
  --nv:            #0B1437; /* hero gradient navy — decorative only */
  --bg:            var(--canvas);
  --bg2:           var(--border);
  --wh:            var(--surface);
  --row:           var(--surface);
  --tx:            var(--ink);
  --ink-2:         var(--ink-secondary);
  --mt:            var(--ink-secondary); /* was #8A8FA3 (2.89:1, AA fail) — now AA-safe */
  --muted:         var(--ink-secondary);
  --bd:            var(--border);
  --line:          var(--border);
  --saffron:       var(--brand);
  --saffron-100:   var(--brand-tint-100);
  --saffron-50:    var(--brand-tint-50);
  --f:             var(--font-ui);

  /* Old short AQI names → new bands. --aqi-sev meant "terminal/worst band"
     under the old 6-color set (good/sat/mod/poor/vp/sev) — that's now
     --aqi-severe (maroon), matching CPCB's real terminal category. */
  --aqi-sat:       var(--aqi-satisfactory);
  --aqi-mod:       var(--aqi-moderate);
  --aqi-vp:        var(--aqi-very-poor);
  --aqi-sev:       var(--aqi-severe);
}

/* ── Base element wiring (optional — remove if ir-home*.css already sets these) ── */
body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--canvas);
}
a { color: var(--brand-text); }
a:hover { color: var(--brand-hover); }

/* Any element holding a numeric data value: prices, temps, AQI numerals. */
.ir-figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Self-hosted mono font-face — 2 weights (Regular 400, SemiBold 600),
   under the site's 2–3 weight budget. Files live in /fonts/ next to this
   stylesheet (theme root), sourced from Fontsource's IBM Plex Mono build
   (same OFL-licensed upstream as Google Fonts, pre-subset to Latin). ──── */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── Future localization — swap --font-ui when Hindi/Tamil/Bengali/etc. ship.
   Self-host Noto Sans (Latin) + the matching Noto Sans <Script> family,
   loading only the script(s) a given locale needs via unicode-range.
   Example (Hindi): ──────────────────────────────────────────────────────
@font-face {
  font-family: "Noto Sans";
  src: url("fonts/NotoSans-Regular.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F;
}
@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("fonts/NotoSansDevanagari-Regular.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0900-097F;
}
:root[lang="hi"] { --font-ui: "Noto Sans", "Noto Sans Devanagari", system-ui, sans-serif; }
   ──────────────────────────────────────────────────────────────────────── */