/* ============================================================================
   ik-tokens.css — THE canonical design-token source for the whole IK product.
   Load FIRST, before ik-components.css and any surface stylesheet.
   One place for: brand · surfaces (light+dark) · text · borders · shadows ·
   focus · status · navy/violet accents · CEFR + question-type data palettes ·
   chart series · exam-domain tokens · migration compatibility aliases.
   No component or layout rules live here. Font faces are self-hosted in ik-fonts.css;
   typography tokens (--font-*) live here. See FONT_AUDIT.md for the typography plan.
   ========================================================================== */

:root{
  color-scheme: light;

  /* ── Typography (self-hosted via ik-fonts.css; founder decision 2026-07-13) ──
     Content-mode boundary: authentic exam content → --font-exam (Arial);
     general product UI → --font-body (Lato). Headings = Lato weight 700/900
     (NOT Bebas). Bebas = controlled display only. Playfair = logo/brand only. */
  --font-body:'Lato','Segoe UI',Arial,sans-serif;   /* body + general UI + analytics/feedback */
  --font-heading:var(--font-body);                   /* dashboard/page/card headings — Lato 700/900 */
  --font-display:'Bebas Neue',Impact,var(--font-body); /* marketing headlines, promo numbers, expressive only */
  --font-logo:'Playfair Display',Georgia,serif;      /* official logo / wordmark / approved brand signatures ONLY */
  --font-bengali:'Hind Siliguri','Noto Sans Bengali',var(--font-body); /* primary Bengali (Noto = fallback glyphs) */
  --font-mono:'Courier New',monospace;               /* genuine technical/code contexts only */
  --font-exam:Arial,Helvetica,sans-serif;            /* ALL authentic IELTS exam / exam-style content */
  --font-passage:var(--font-exam);                   /* reading/listening passages (was Georgia/Times) */

  /* ── Brand — maroon = identity + action ──────────────────────────────── */
  --brand:#8A2432;
  --brand-dark:#5C1220;
  --brand-hover:#A02A3A;
  --brand-soft:#F8ECEE;
  --brand-on:#FFFFFF;

  /* ── Supporting accents — navy = learning/data, violet = writing/AI ───── */
  --navy:#244A73;
  --navy-hover:#1C3B5D;
  --navy-soft:#EAF1F7;
  --violet:#7256B5;
  --violet-hover:#5E459A;
  --violet-soft:#F0ECFA;

  /* ── Surfaces — cool neutral ─────────────────────────────────────────── */
  --page-bg:#F7F7F9;
  --surface:#FFFFFF;
  --surface-subtle:#FAFAFB;
  --surface-raised:#FFFFFF;
  --control-bg:#F2F2F5;
  --overlay:rgba(24,24,27,0.48);

  /* ── Text ────────────────────────────────────────────────────────────── */
  --text-primary:#18181B;
  --text-secondary:#61616B;
  --text-tertiary:#92929D;
  --text-disabled:#A9A9B2;
  --text-on-brand:#FFFFFF;

  /* ── Structure ───────────────────────────────────────────────────────── */
  --border:#E7E7EB;
  --divider:#EEEEF1;
  --focus-ring:rgba(138,36,50,0.22);

  /* ── Status — meaning only, never decoration ─────────────────────────── */
  --success:#278456; --success-soft:#EAF6F0;
  --warning:#B56A12; --warning-soft:#FFF4E5;
  --danger:#C23B3B;  --danger-soft:#FCEDED;
  --info:#316A9B;    --info-soft:#EAF2F8;

  /* ── Elevation ───────────────────────────────────────────────────────── */
  --shadow-card:0 1px 3px rgba(24,24,27,0.06),0 8px 24px rgba(24,24,27,0.04);
  --shadow-raised:0 8px 24px rgba(24,24,27,0.08),0 2px 8px rgba(24,24,27,0.05);

  /* ── Tenant branding — the ACTIVE brand token. Defaults to canonical maroon;
       tenant-branding.js overrides the --ik-maroon family on :root for white-label
       coaching centres. --brand (platform) and all status/CEFR/data tokens are
       NEVER touched by tenant JS, so tenant color can't corrupt semantics. Use
       --tenant-brand for tenant-appropriate brand surfaces + CTAs only. ─────── */
  --tenant-brand:var(--ik-maroon);
  --tenant-brand-on:var(--brand-on);

  /* ── Domain-specific — mock exam authenticity (British-Council red) ────── */
  --exam-red:#C8102E;

  /* ── CEFR level palette (CVD-validated, both themes) ─────────────────────
       One hue per level; deliberately avoids green/red/amber so a level never
       reads as a strong/weak verdict. -soft tints are translucent. */
  --lvl-a1:#2a78d6; --lvl-a2:#1baf7a; --lvl-b1:#eb6834; --lvl-b2:#e87ba4; --lvl-c1:#4a3aa7;
  --lvl-a1-soft:rgba(42,120,214,.13); --lvl-a2-soft:rgba(27,175,122,.15);
  --lvl-b1-soft:rgba(235,104,52,.15); --lvl-b2-soft:rgba(232,123,164,.17); --lvl-c1-soft:rgba(74,58,167,.14);

  /* ── Question-type palette (CVD-validated 8-hue categorical set) ───────── */
  --qt-mcq:#2a78d6; --qt-tfng:#4a3aa7; --qt-matching:#1baf7a; --qt-completion:#008300;
  --qt-labelling:#eb6834; --qt-heading:#eda100; --qt-shortanswer:#e87ba4; --qt-other:#e34948;

  /* ── General data-viz series — use ONLY when several series need
       differentiation; keep distinct from brand/status. ─────────────────── */
  --chart-1:#244A73; --chart-2:#7256B5; --chart-3:#8A2432;
  --chart-4:#278456; --chart-5:#B56A12; --chart-6:#316A9B;

  /* ── Overall/accuracy progress-bar fill — brand maroon ───────────────── */
  --bar-fill:linear-gradient(90deg,var(--brand),var(--brand-hover));

  /* ══ Compatibility aliases (migration) ═══════════════════════════════════
     Retained so existing var()-based components keep working while surfaces
     migrate. Prefer the canonical token in new code. Documented in the report.
     ── Student Portal / dashboard.css legacy names ── */
  --bg:var(--page-bg); --bg2:var(--surface-subtle);
  --card:var(--surface); --card-bg:var(--surface); --white:var(--surface);
  --header-btn-bg:var(--surface);
  --border2:var(--border);
  --text:var(--text-primary);
  --muted:var(--text-secondary);
  --maroon:var(--brand); --maroon2:var(--brand-hover);
  --maroon-dim:var(--brand-soft); --maroon-border:var(--focus-ring);
  --green:var(--success); --red:var(--danger);
  /* --gold is DECORATIVE achievement gold on this surface (badges), aliased to
     --warning as the shipped behavior. NOT a general warning alias — see report. */
  --gold:var(--warning); --gold2:#DB8A2A;
  --outer-shadow:0 30px 60px rgba(24,24,27,0.10);
  --card-shadow:var(--shadow-card);
  --streak-bg:linear-gradient(90deg,var(--brand-soft),var(--surface));
  --mascot-bg:var(--brand-soft);
  --radius:12px;
  --sidebar-bg:#1a0505; --sidebar-border:#2e1010;
  /* Hub / category accents — Reading/Listening=navy · Grammar/Vocab=maroon ·
     Writing/Speaking/AI=violet. Distinguish same-color hubs by label+icon. */
  --hub-reading:var(--navy);    --hub-reading-tint:var(--navy-soft);
  --hub-listening:var(--navy);  --hub-listening-tint:var(--navy-soft);
  --hub-vocab:var(--brand);     --hub-vocab-tint:var(--brand-soft);
  --hub-grammar:var(--brand);   --hub-grammar-tint:var(--brand-soft);
  --hub-speaking:var(--violet); --hub-speaking-tint:var(--violet-soft);
  --hub-purple:var(--violet);
  /* ── ik-design.css shared-system names (SaaS surfaces). The --ik-maroon family
       is the tenant-overridable brand (tenant-branding.js setProperty's these on
       :root); canonical maroon is the platform default here. ─────────────────── */
  --ik-maroon:var(--brand); --ik-maroon-deep:var(--brand-dark); --ik-maroon-soft:var(--brand-soft);
  --ik-maroon-007:rgba(138,36,50,0.07); --ik-maroon-008:rgba(138,36,50,0.08); --ik-maroon-014:rgba(138,36,50,0.14);
  --ik-focus-ring:var(--focus-ring);
  --ik-ink:var(--text-primary); --ik-ink-2:var(--text-secondary); --ik-ink-3:var(--text-tertiary);
  --ik-surface:var(--surface); --ik-surface-2:var(--surface-subtle); --ik-surface-3:var(--control-bg);
  --ik-border:var(--border); --ik-border-strong:var(--divider);
  --ik-ok:var(--success); --ik-warn:var(--warning); --ik-danger:var(--danger); --ik-info:var(--info);
}

/* ── Dark theme ──────────────────────────────────────────────────────────
   Canonical dark surface. Supports the existing html[data-theme="dark"] hook
   AND a .theme-dark class for surfaces that toggle by class. */
[data-theme="dark"],
.theme-dark{
  color-scheme: dark;

  --page-bg:#111114; --surface:#19191D; --surface-subtle:#202025; --surface-raised:#202025;
  --control-bg:#242429; --overlay:rgba(0,0,0,0.68);

  --text-primary:#F7F7F8; --text-secondary:#B7B7C0; --text-tertiary:#85858F; --text-disabled:#686872;

  --border:#303037; --divider:#29292F;

  --brand:#B6495B; --brand-hover:#C65A6B; --brand-soft:rgba(182,73,91,0.14);
  --navy:#6F9CC8; --navy-hover:#88ADD0; --navy-soft:rgba(73,119,161,0.16);
  --violet:#A18AE0; --violet-hover:#B4A1E8; --violet-soft:rgba(126,98,192,0.17);

  --success:#55B982; --success-soft:rgba(39,132,86,0.16);
  --warning:#D69A43; --warning-soft:rgba(181,106,18,0.17);
  --danger:#E06B6B;  --danger-soft:rgba(194,59,59,0.17);
  --info:#72A7CE;    --info-soft:rgba(49,106,155,0.18);

  --focus-ring:rgba(198,90,107,0.30);
  --shadow-card:0 1px 3px rgba(0,0,0,0.24),0 10px 30px rgba(0,0,0,0.16);
  --shadow-raised:0 12px 34px rgba(0,0,0,0.30),0 3px 10px rgba(0,0,0,0.22);

  /* legacy aliases needing an explicit dark value (the rest auto-follow canonical) */
  --mascot-bg:#242429;
  --outer-shadow:0 30px 60px rgba(0,0,0,0.5);
  --streak-bg:linear-gradient(90deg,var(--brand-soft),var(--surface));

  /* CEFR + question-type dark variants (CVD-validated on charcoal) */
  --lvl-a1:#3987e5; --lvl-a2:#199e70; --lvl-b1:#d95926; --lvl-b2:#d55181; --lvl-c1:#9085e9;
  --lvl-a1-soft:rgba(57,135,229,.18); --lvl-a2-soft:rgba(25,158,112,.20);
  --lvl-b1-soft:rgba(217,89,38,.20); --lvl-b2-soft:rgba(213,81,129,.22); --lvl-c1-soft:rgba(144,133,233,.20);
  --qt-mcq:#3987e5; --qt-tfng:#9085e9; --qt-matching:#199e70; --qt-completion:#22a04f;
  --qt-labelling:#d95926; --qt-heading:#c98500; --qt-shortanswer:#d55181; --qt-other:#e66767;

  /* data-viz series lightened for charcoal */
  --chart-1:#6F9CC8; --chart-2:#A18AE0; --chart-3:#B6495B;
  --chart-4:#55B982; --chart-5:#D69A43; --chart-6:#72A7CE;
}