/* =====================================================================
   TIB DESIGN TOKENS — F6 "Inkline"  (the design system of record)
   ---------------------------------------------------------------------
   COLOUR LAW (absolute — CONCEPT §9 / DESIGN_SYSTEM §0):
     · RED   (--c-breaking) appears ONLY on Breaking. Anywhere else = bug.
     · AMBER (--c-live)     appears ONLY on Developing / live / velocity.
     · EVERYTHING ELSE IS INK. Brand, nav, links, buttons, hover, chips,
       meters: tonal ink, never colour. "Top" is typographic (a rule).
   THEMES: light is default; dark via [data-theme="dark"] or (when the
   toggle is on "auto") prefers-color-scheme. Both are first-class.
   RTL: every component uses logical properties; tokens are direction-free.
   ===================================================================== */

:root {
  /* ---- type families ---- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
  --font-ar-display: 'Cairo', 'IBM Plex Sans Arabic', system-ui, sans-serif;

  /* ---- type scale (rem; 1rem = 16px) ---- */
  --fs-xs: .6875rem;   /* 11 — eyebrows, kickers, badges  */
  --fs-s: .78125rem;   /* 12.5 — meta, corroboration      */
  --fs-base: .875rem;  /* 14 — chrome, lists              */
  --fs-m: .96875rem;   /* 15.5 — desk rows, timeline body */
  --fs-l: 1.125rem;    /* 18 — card headlines             */
  --fs-xl: 1.375rem;   /* 22 — section leads              */
  --fs-2xl: 1.75rem;   /* 28 — page titles (mobile hero)  */
  --fs-3xl: 2.25rem;   /* 36 — hero / story display       */
  --lh-tight: 1.14;
  --lh-snug: 1.28;
  --lh-body: 1.62;
  --lh-ar: 1.85;       /* Arabic text needs taller lines  */
  --track-caps: .09em; /* uppercase eyebrow tracking (LTR only; RTL resets to 0) */

  /* ---- space scale ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 44px;

  /* ---- radius / structure ---- */
  --r-s: 6px; --r-m: 9px; --r-l: 12px; --r-pill: 999px;
  --maxw: 1120px;
  --rail-w: 300px;

  /* ---- motion (restrained; one live pulse, short fades) ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: .14s;
  --t-med: .22s;
}

/* =====================  LIGHT (default)  ===================== */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #FAF7F1;             /* paper                       */
  --surface: #FFFFFF;        /* raised paper                */
  --surface-2: #F1ECE2;      /* recessed paper / thumbs     */
  --line: rgba(26,23,17,.12);      /* hairline               */
  --line-2: rgba(26,23,17,.22);    /* stronger hairline      */
  --text: #1D1A14;           /* ink                         */
  --dim: #565148;            /* secondary ink               */
  --mute: #8A8477;           /* tertiary ink                */
  --btn: #1D1A14;            /* solid button = ink          */
  --btn-fg: #FAF7F1;
  --c-breaking: #C4362B;               /* RED — Breaking ONLY  */
  --c-breaking-weak: rgba(196,54,43,.10);
  --c-live: #B0740F;                   /* AMBER — Developing ONLY */
  --c-live-weak: rgba(176,116,15,.12);
  --shadow-pop: 0 18px 44px -22px rgba(26,23,17,.35);
  --scrim: linear-gradient(to top, rgba(0,0,0,.84) 0%, rgba(0,0,0,.28) 48%, transparent 74%);
}

/* =====================  DARK  ===================== */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15161A;
  --surface: #1D1E24;
  --surface-2: #25262E;
  --line: rgba(255,255,255,.09);
  --line-2: rgba(255,255,255,.16);
  --text: #ECE8E1;
  --dim: #ABA79E;
  --mute: #7C786F;
  --btn: #ECE8E1;
  --btn-fg: #15161A;
  --c-breaking: #E4483A;
  --c-breaking-weak: rgba(228,72,58,.14);
  --c-live: #E3A63F;
  --c-live-weak: rgba(227,166,63,.16);
  --shadow-pop: 0 18px 44px -22px rgba(0,0,0,.6);
  --scrim: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.32) 48%, transparent 74%);
}

/* Auto mode: html[data-theme="auto"] follows the system. The toggle cycles
   auto → light → dark; tib.js stamps the resolved value on data-resolved. */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;
    --bg: #15161A;
    --surface: #1D1E24;
    --surface-2: #25262E;
    --line: rgba(255,255,255,.09);
    --line-2: rgba(255,255,255,.16);
    --text: #ECE8E1;
    --dim: #ABA79E;
    --mute: #7C786F;
    --btn: #ECE8E1;
    --btn-fg: #15161A;
    --c-breaking: #E4483A;
    --c-breaking-weak: rgba(228,72,58,.14);
    --c-live: #E3A63F;
    --c-live-weak: rgba(227,166,63,.16);
    --shadow-pop: 0 18px 44px -22px rgba(0,0,0,.6);
    --scrim: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.32) 48%, transparent 74%);
  }
}

/* =====================  "WARM PRINT" CATEGORY HUES (F6 revision)  ============
   Category colours are editorial IDENTITY, not state (DESIGN_SYSTEM §0.1):
   muted print-like hues for kickers, section accents and labelled gradient
   tiles. RESERVED and untouchable: red = Breaking only, amber = Developing
   only. Each hue: -fg (text/accent) · -soft (wash) · -g1/-g2 (tile gradient). */
:root, [data-theme="light"] {
  --hue-politics-fg: #4A5E80;  --hue-politics-soft: rgba(74,94,128,.09);   --hue-politics-g1: #56688a; --hue-politics-g2: #232c3d;
  --hue-conflict-fg: #7A4A38;  --hue-conflict-soft: rgba(122,74,56,.09);   --hue-conflict-g1: #7a5240; --hue-conflict-g2: #33201a;
  --hue-business-fg: #3E6B54;  --hue-business-soft: rgba(62,107,84,.09);   --hue-business-g1: #476f5b; --hue-business-g2: #1c2f26;
  --hue-tech-fg: #4E5D9E;      --hue-tech-soft: rgba(78,93,158,.09);       --hue-tech-g1: #575f96;     --hue-tech-g2: #23273f;
  --hue-sports-fg: #2F7A6B;    --hue-sports-soft: rgba(47,122,107,.09);    --hue-sports-g1: #35786c;   --hue-sports-g2: #16332d;
  --hue-health-fg: #8A5876;    --hue-health-soft: rgba(138,88,118,.09);    --hue-health-g1: #86597a;   --hue-health-g2: #382330;
  --hue-climate-fg: #6B7A3D;   --hue-climate-soft: rgba(107,122,61,.09);   --hue-climate-g1: #6f7a48;  --hue-climate-g2: #2b301c;
  --hue-culture-fg: #8C6B3E;   --hue-culture-soft: rgba(140,107,62,.09);   --hue-culture-g1: #8a6f47;  --hue-culture-g2: #38301e;
  --hue-none-fg: var(--dim);   --hue-none-soft: var(--surface-2);          --hue-none-g1: #5a5f66;     --hue-none-g2: #23262b;
}
[data-theme="dark"] {
  --hue-politics-fg: #8FA5CB;  --hue-politics-soft: rgba(143,165,203,.10);
  --hue-conflict-fg: #C79A87;  --hue-conflict-soft: rgba(199,154,135,.10);
  --hue-business-fg: #8FBCA5;  --hue-business-soft: rgba(143,188,165,.10);
  --hue-tech-fg: #A0ACDF;      --hue-tech-soft: rgba(160,172,223,.10);
  --hue-sports-fg: #7FC1B2;    --hue-sports-soft: rgba(127,193,178,.10);
  --hue-health-fg: #C79AB5;    --hue-health-soft: rgba(199,154,181,.10);
  --hue-climate-fg: #AEBD7E;   --hue-climate-soft: rgba(174,189,126,.10);
  --hue-culture-fg: #CBAA79;   --hue-culture-soft: rgba(203,170,121,.10);
  --hue-none-fg: var(--dim);   --hue-none-soft: var(--surface-2);
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --hue-politics-fg: #8FA5CB;  --hue-politics-soft: rgba(143,165,203,.10);
    --hue-conflict-fg: #C79A87;  --hue-conflict-soft: rgba(199,154,135,.10);
    --hue-business-fg: #8FBCA5;  --hue-business-soft: rgba(143,188,165,.10);
    --hue-tech-fg: #A0ACDF;      --hue-tech-soft: rgba(160,172,223,.10);
    --hue-sports-fg: #7FC1B2;    --hue-sports-soft: rgba(127,193,178,.10);
    --hue-health-fg: #C79AB5;    --hue-health-soft: rgba(199,154,181,.10);
    --hue-climate-fg: #AEBD7E;   --hue-climate-soft: rgba(174,189,126,.10);
    --hue-culture-fg: #CBAA79;   --hue-culture-soft: rgba(203,170,121,.10);
    --hue-none-fg: var(--dim);   --hue-none-soft: var(--surface-2);
  }
}
/* Hue application classes (gradient stops shared across themes — tiles carry
   their own white label, legible on both). */
.hue-politics { --hue-fg: var(--hue-politics-fg); --hue-soft: var(--hue-politics-soft); --hue-g1: var(--hue-politics-g1, #56688a); --hue-g2: var(--hue-politics-g2, #232c3d); }
.hue-conflict { --hue-fg: var(--hue-conflict-fg); --hue-soft: var(--hue-conflict-soft); --hue-g1: var(--hue-conflict-g1, #7a5240); --hue-g2: var(--hue-conflict-g2, #33201a); }
.hue-business { --hue-fg: var(--hue-business-fg); --hue-soft: var(--hue-business-soft); --hue-g1: var(--hue-business-g1, #476f5b); --hue-g2: var(--hue-business-g2, #1c2f26); }
.hue-tech     { --hue-fg: var(--hue-tech-fg);     --hue-soft: var(--hue-tech-soft);     --hue-g1: var(--hue-tech-g1, #575f96);     --hue-g2: var(--hue-tech-g2, #23273f); }
.hue-sports   { --hue-fg: var(--hue-sports-fg);   --hue-soft: var(--hue-sports-soft);   --hue-g1: var(--hue-sports-g1, #35786c);   --hue-g2: var(--hue-sports-g2, #16332d); }
.hue-health   { --hue-fg: var(--hue-health-fg);   --hue-soft: var(--hue-health-soft);   --hue-g1: var(--hue-health-g1, #86597a);   --hue-g2: var(--hue-health-g2, #382330); }
.hue-climate  { --hue-fg: var(--hue-climate-fg);  --hue-soft: var(--hue-climate-soft);  --hue-g1: var(--hue-climate-g1, #6f7a48);  --hue-g2: var(--hue-climate-g2, #2b301c); }
.hue-culture  { --hue-fg: var(--hue-culture-fg);  --hue-soft: var(--hue-culture-soft);  --hue-g1: var(--hue-culture-g1, #8a6f47);  --hue-g2: var(--hue-culture-g2, #38301e); }
.hue-none     { --hue-fg: var(--hue-none-fg);     --hue-soft: var(--hue-none-soft);     --hue-g1: #5a5f66;                          --hue-g2: #23262b; }

/* =====================  RTL type mapping  =====================
   Arabic surfaces swap families wholesale and drop Latin tracking.
   Applied by [dir="rtl"] on <html> (the edition sets it — RTL-first,
   not retrofitted). */
[dir="rtl"] {
  --font-sans: var(--font-ar);
  --font-serif: var(--font-ar-display);
  --lh-body: var(--lh-ar);
  --track-caps: 0em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}