/* ============================================================================
   KhaleejKeys — Design Tokens (single source of truth)
   ----------------------------------------------------------------------------
   One semantic token set for the whole site. Replaces the two drifted per-page
   :root vocabularies that previously lived inline in every page's <style>.

   Linked by every public page as the FIRST stylesheet in <head>, so the inline
   page styles that follow can reference these custom properties.

   Light-only. Dark mode was removed during the R2 consolidation; a ready stub
   is kept commented at the bottom so it is a cheap one-block re-add later.

   LEGACY ALIASES: the previous token names (--ink, --dim, --card, ...) are kept
   as thin aliases onto the semantic tokens so the ~300 existing var() references
   across the pages keep working without a mass rewrite. They are transitional —
   the restyle migrates each page to the semantic names and then this alias block
   is deleted. Do not add new uses of the legacy names.
   ============================================================================ */

/* ============================================================================
   SELF-HOSTED FONTS (audit #34) — Inter + Inter Tight, variable WOFF2, served
   same-origin from /assets/fonts/ (was Google Fonts; CSP font-src is now 'self').
   Subsets: latin + latin-ext with Google's own unicode-range splits, so only
   the latin file downloads for English pages. Weight ranges match the old
   css2 request (Inter 300-700, Inter Tight 600-700). latin is declared LAST
   so it wins where ranges overlap (mirrors Google's emitted order).
   ============================================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/assets/fonts/inter-tight-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/assets/fonts/inter-tight-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Brand ─────────────────────────────────────────────────────────────── */
  --accent:        #462092;   /* purple — primary brand (11.2:1 on white) */
  --accent-soft:   #B8A6DD;
  --accent-2:      #86691B;   /* deep gold; AA as text on white (5.2:1). LEGACY after the purple/lime retheme - unused repo-wide (eyebrow + hero-trust moved to --accent). Kept defined. */
  --accent-2-soft: #A7FF00;   /* acid lime; CTA + soft-fill accent, dark text on top (~14:1), e.g. the newsletter CTA */

  /* ── R4 redesign foundation (additive) — THE LIME LAW ────────────────────
     --lime is the brand/action colour and appears ONLY on the dark chrome bands
     (--chrome: header / footer / dark CTA). Never text/figure on a light surface,
     never encodes data. accent=structure/data, pos/neg=trend. */
  --lime:          var(--accent-2-soft);   /* #A7FF00 — semantic alias */
  --lime-hover:    #B7FF33;
  --lime-ink:      #14210A;                /* dark text that sits ON a lime fill */
  --accent-hi:     #8A73F0;                /* lighter violet — hover / dark-mode line */
  --accent-tint:   color-mix(in srgb, var(--accent) 7%, transparent);
  --chrome:        var(--surface-dark);    /* #160F24 — fixed across every palette + theme */
  --chrome-ink:    var(--text-on-dark);
  --chrome-sub:    rgba(255,255,255,.62);
  --chrome-line:   rgba(255,255,255,.09);
  /* R4-fix: ink that sits ON an --accent fill (buttons / active toggles / badges).
     #fff works on the dark light-mode accent; the dark theme flips --accent LIGHT,
     so it overrides this to a dark ink (see the dark block) to keep AA. */
  --on-accent:     #ffffff;

  /* ── Backgrounds / surfaces ────────────────────────────────────────────── */
  --bg:            #F8F7FC;   /* page background                              */
  --surface:       #FFFFFF;   /* cards, panels                               */
  --surface-alt:   #EEEAF5;   /* subtle panel / track tint                   */
  --surface-muted: #EEF0F4;   /* W5: neutral (un-branded) low-confidence card surface */
  --surface-dark:  #160F24;   /* nav + footer + dark bands                   */

  /* ── Text ──────────────────────────────────────────────────────────────── */
  --text:          #0F1419;   /* primary                                     */
  --text-muted:    #475569;   /* secondary — AA 7.58:1 on white              */
  --text-subtle:   #5E6A7B;   /* tertiary / placeholder — AA 5.49:1 on white */
  --text-on-dark:  #F8FAFB;   /* text sitting on --surface-dark              */

  /* ── Lines ─────────────────────────────────────────────────────────────── */
  --border:        #E2E8F0;
  --card-border:   transparent;    /* B1: elevated cards float on shadow in light */
  --border-strong: #CBD3DF;
  --border-ui:     #97A2B2;   /* R4-fix: ~3:1 on white — for controls that rely on the border alone (form inputs) */
  --chart-grid:    rgba(25,25,33,.10);  /* R4: lifted from .06 for chart-line legibility (UIUX D4) */
  /* R4 editorial SVG trend chart (kk-svg-chart.js) — the line is the DATA hue (--accent,
     structure), never a trend colour. --chart-fill is the area-gradient top stop; it fades
     to transparent at the baseline. All reference --accent so they re-theme per palette AND
     flip correctly in dark with no JS colour reads. */
  --chart-line:    var(--accent);
  --chart-fill:    color-mix(in srgb, var(--accent) 15%, transparent);
  --chart-point:   var(--accent);

  /* ── Feedback / trend semantics ────────────────────────────────────────── */
  /* R4: --neg is brand-harmonised + WCAG-AA on white (the old #EF4444 was ~3.7:1
     on the small down-trend figures). --danger kept as an alias. Retires purple-for-up. */
  --pos:           #157F4B;   --pos-bg: rgba(21,127,75,.10);   /* R4-fix: AA on white (was #1E9E62 = 3.43:1) */
  --neg:           #C43A54;   --neg-bg: rgba(196,58,84,.10);
  --danger:        var(--neg);

  /* ── Shape / depth ─────────────────────────────────────────────────────── */
  --radius-sm:     6px;
  --radius:        8px;
  --radius-lg:     14px;
  --radius-xl:     16px;
  --radius-pill:   999px;
  /* R4: elevation is now VIOLET-TINTED, not generic black (materiality lift) */
  --shadow-sm:     0 1px 2px rgba(45,29,110,.06);
  --shadow:        0 1px 2px rgba(45,29,110,.05), 0 5px 16px rgba(45,29,110,.07);
  --shadow-lg:     0 1px 2px rgba(45,29,110,.06), 0 16px 40px rgba(45,29,110,.12);
  --highlight:     inset 0 1px 0 rgba(255,255,255,.7);  /* top light-catch on cards */

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --ease:             cubic-bezier(.4, 0, .2, 1);   /* R4: one signature curve */
  --transition:       180ms var(--ease);
  --transition-slow:  320ms var(--ease);

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --page-max:      1080px;          /* canonical content-frame width — every text page shares this */
  --page-pad:      20px 20px 72px;   /* canonical content-frame padding */

  /* ── R4: numeric DISPLAY tier — figures out-weigh their labels on data pages ── */
  --num-hero:      clamp(1.6rem, 8vw, 2.3rem);   /* fluid: full 2.3rem ≥460px, scales down on phones so long/affixed numbers fit their card */
  --num-lg:        clamp(1.2rem, 5.4vw, 1.5rem);
  --num-md:        1.0rem;

  /* ── R4 modular type ramp (A2) — the sanctioned size steps for STRUCTURAL type
     (kickers, captions, body, leads, section titles, headings). Figures use the
     --num-* tier above; h1 uses the fluid clamp in chrome.css. New/edited type
     should reference a step; snap ad-hoc sizes to the nearest. ─────────────────── */
  --fs-1:  0.72rem;   /* micro labels / kickers / eyebrows */
  --fs-2:  0.82rem;   /* captions / small print */
  --fs-3:  0.92rem;   /* secondary body / table cells */
  --fs-4:  1.0rem;    /* body / small lead */
  --fs-5:  1.2rem;    /* lead / card title */
  --fs-6:  1.55rem;   /* section title / h3 */
  --fs-7:  2.0rem;    /* h2 / large heading */
}

/* ============================================================================
   SITE PALETTES — admin-switchable themes (Follow-up #11)
   ----------------------------------------------------------------------------
   The active palette is chosen in the admin panel and baked server-side into
   <html data-theme="x">. 'purple' is the :root default above (no block needed);
   'forest' and 'burgundy' are the two selectable alternates.

   Each palette overrides ONLY 5 tokens — the brand family (--accent,
   --accent-soft), the dark chrome band (--surface-dark, tinted toward the hue
   so header + footer re-theme), and a FAINT light-surface tint (--bg,
   --surface-alt). Everything else stays fixed: --surface (pure white), all
   text tokens, --border, --danger, --chart-grid, and the structural tokens.
   Keeping --text fixed (#0F1419) guarantees body legibility AND satisfies the
   #10 tooltip rule (light --text-on-dark stays legible on the --text bg) for
   every palette by construction. All accents clear WCAG AA (>=4.5:1) on white.
   ============================================================================ */

[data-theme="forest"] {
  --accent:       #3C7A52;  /* 5.12:1 on white */
  --accent-soft:  #94C2A4;
  --surface-dark: #141F18;
  --bg:           #F7FAF8;
  --surface-alt:  #EBF2EC;
}
[data-theme="burgundy"] {
  --accent:       #9B3B4E;  /* 6.71:1 on white */
  --accent-soft:  #D49AA5;
  --surface-dark: #1E1316;
  --bg:           #FBF6F7;
  --surface-alt:  #F3E9EB;
}
/* ── Dark theme (R4) — first-class, but DORMANT until a toggle sets
      data-theme="dark" on <html>; adding these tokens is inert until then.
      The chrome band (--surface-dark / --chrome) is intentionally NOT overridden —
      it stays #160F24 in both themes, so header/footer + the lime CTA look
      identical light or dark. Text values are the audited clean-dark set. ──────── */
:root[data-theme="dark"] {
  --bg:            #0A0A0E;   /* W3 depth: deeper page so elevated cards separate */
  --surface:       #1E1E28;   /* W3 depth: cards lifted clearly above the page */
  --surface-alt:   #2A2A3A;   /* W3 depth: a clearer third layer (table heads, hovers) */
  --surface-muted: #141419;   /* W5: low-confidence card recedes toward the page */
  --text:          #F3F3F6;
  --text-muted:    #A0A0AC;
  --text-subtle:   #9C97A8;   /* R4-fix: lifted from #8B8794 for label legibility headroom */
  --border:        #27272F;
  --card-border:   var(--border);   /* B1: dark shadows are weak — border defines the card */
  --border-strong: #33333D;
  --border-ui:     #5F5F6A;   /* R4-fix: ~3:1 on --surface for form-control edges */
  --chart-grid:    rgba(255,255,255,.06);
  --chart-fill:    color-mix(in srgb, var(--accent) 24%, transparent);   /* R4: heavier area fill for the dark line to read */
  --accent:        #8A73F0;
  --accent-soft:   #6248D9;
  --accent-hi:     #A794F5;
  --accent-tint:   color-mix(in srgb, var(--accent) 16%, transparent);
  --on-accent:     #14101F;   /* R4-fix: dark ink on the LIGHT dark-mode accent fill (white would be ~3.8:1) */
  --pos:           #3FCB84;   --pos-bg: rgba(63,203,132,.13);
  --neg:           #F0728A;   --neg-bg: rgba(240,114,138,.13);
  --shadow-sm:     0 1px 2px rgba(0,0,0,.40);
  --shadow:        0 1px 2px rgba(0,0,0,.40), 0 6px 20px rgba(0,0,0,.35);
  --shadow-lg:     0 1px 2px rgba(0,0,0,.50), 0 16px 44px rgba(0,0,0,.45);
  --highlight:     inset 0 1px 0 rgba(255,255,255,.11);   /* W3 depth: stronger top rim-light (dark shadows don't read, so the lit edge carries the lift) */
}
