/* ================================================================
   tokens.css — Eduversal SHARED design tokens
   Source of truth: monorepo /shared-design/tokens.css
   ----------------------------------------------------------------
   This file is COPIED into each app's own folder by its build.js
   step (Central Hub / Academic Hub / Teachers Hub). Edit it HERE,
   commit at monorepo root, and the next build of each hub will pick
   up the change.

   Brand decisions (Step 13, 2026-05-03):
     primary  : #6c5ce7  (mor — already canonical in Teachers Hub,
                          present in eduversal favicon, AA contrast
                          on white)
     secondary: #0891b2  (cyan — Central Hub's existing accent)
     gradient : 135deg, #7c3aed → #0891b2 (purple → cyan, ships in
                          TH button styles already)
     fonts    : DM Sans (UI), Lora (page titles), DM Mono (code/IDs)

   Hub-specific accent overrides (e.g. red for math pacing pages,
   amber for appraisals) live in each page's <style> block AFTER
   this file is loaded — they override --accent only.
   ================================================================ */

:root {
  /* ── Brand (Eduversal-wide) ───────────────────────────────────── */
  --brand:        #6c5ce7;   /* primary mor */
  --brand-dk:     #5a4bd1;
  --brand-2:      #ede9fe;   /* light tint */
  --secondary:    #0891b2;   /* cyan companion */
  --secondary-dk: #0e7490;
  --secondary-2:  #ccfbf1;   /* light tint */
  --brand-gradient: linear-gradient(135deg, #7c3aed, #0891b2);

  /* Default --accent → brand. Pages can override per-page (e.g.
     pacing pages set --accent to a subject color). */
  --accent:    var(--brand);
  --accent-dk: var(--brand-dk);
  --accent-2:  var(--brand-2);

  /* ── Ink scale (dark-on-light text) ───────────────────────────── */
  --ink:       #1c1c2e;
  --ink-2:     #44445a;
  --ink-3:     #8888a8;

  /* ── Paper scale (light backgrounds) ──────────────────────────── */
  --paper:     #f7f6f3;
  --paper-2:   #efede8;
  --white:     #ffffff;
  --border:    #e0ddd6;

  /* ── Semantic colours ──────────────────────────────────────────── */
  --green:     #059669;
  --green-2:   #d1fae5;
  --red:       #dc2626;
  --red-2:     #fee2e2;
  --amber:     #b07800;
  --amber-2:   #fef8e7;
  --blue:      #1a5fa8;
  --blue-2:    #e8f0fb;

  /* ── Spacing scale ─────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* ── Typography ────────────────────────────────────────────────── */
  --font-body:  "DM Sans", system-ui, -apple-system, sans-serif;
  --font-title: "Lora", Georgia, serif;       /* page titles + hero */
  --font-mono:  "DM Mono", "SF Mono", Consolas, monospace;

  /* Type scale */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 0.9375rem;   /* 15px */
  --text-lg:   1.0625rem;   /* 17px */
  --text-xl:   1.1875rem;   /* 19px */
  --text-2xl:  1.375rem;    /* 22px */
  --text-3xl:  1.625rem;    /* 26px */
  --text-4xl:  2rem;        /* 32px */
  --text-5xl:  2.5rem;      /* 40px */

  /* Font weights */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Shadows (light-surface) ───────────────────────────────────── */
  --shadow-sm: 0 1px 4px rgba(28,28,46,.07);
  --shadow:    0 3px 14px rgba(28,28,46,.10);
  --shadow-lg: 0 10px 40px rgba(28,28,46,.16);

  /* Dark-surface shadows for hero/landing sections that use a dark
     background. Reference these explicitly (e.g. box-shadow: var(--shadow-dark)). */
  --shadow-dark-sm: 0 1px 4px rgba(0,0,0,.2);
  --shadow-dark:    0 3px 14px rgba(0,0,0,.35);
  --shadow-dark-lg: 0 10px 40px rgba(0,0,0,.5);

  /* ── Shape ─────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ── Motion ────────────────────────────────────────────────────── */
  --transition:      0.2s ease;
  --transition-slow: 0.4s ease;

  /* ── Z-index scale ─────────────────────────────────────────────── */
  /* Sticky page chrome below the navbar (page-toolbar etc.) sits at
     --z-sticky. The navbar (`.top-nav`) shares --z-dropdown so its
     own dropdown panels can escape the toolbar's stacking context. */
  --z-sticky:   50;
  --z-dropdown: 100;
  --z-modal:    200;
  --z-toast:    300;

  /* ── Layout ────────────────────────────────────────────────────── */
  --container-max: 1200px;   /* hero/page wrapper max width */

  /* ── Page-hero family tokens ───────────────────────────────────────
     Three canonical hero variants chosen per page family (see
     DESIGN_SYSTEM.md "Page families"). Pages set
     <header class="page-hero" data-accent="cyan|mor|dark"> and the
     gradient + KPI tints follow. Do NOT introduce a 4th gradient
     without updating the families table — drift here is what we just
     audited 2026-05-19 (5 different hero gradients across 6 pages).

     hero-grad-*  : main hero background gradient
     hero-radial-light / hero-radial-dark : optional decorative overlays
                    (the radial light/dark blobs notifications + references
                    already use). Apply via ::before on .page-hero.
     hero-eyebrow / hero-desc : text colour against the dark hero bg.
     hero-kpi-bg / hero-kpi-border / hero-kpi-bg-primary : KPI tile chrome.
  ─────────────────────────────────────────────────────────────────── */

  /* Communication family — message-board, announcements, notifications */
  --hero-grad-cyan: linear-gradient(140deg, #0c4a6e 0%, #0369a1 45%, #0891b2 100%);

  /* Knowledge family — references, handbook, library, roles-positions */
  --hero-grad-mor:  linear-gradient(140deg, #1e1b4b 0%, #3730a3 45%, #6c5ce7 100%);

  /* My Work family — my-induction, my-school-visits (personal CPD surfaces) */
  --hero-grad-dark: linear-gradient(140deg, #1a1530 0%, #0f0c24 50%, #0a0815 100%);

  /* ─── Semantic family expansion (2026-05-27) ──────────────────────
     5 new function-group families so CH (and later AH/TH) reads as
     "rengarenk semantic" instead of 3 colours catch-alling every page.
     Same 140deg dark→vivid structure as the original three. Each family
     maps to a CH navbar function group — see root CLAUDE.md "Design
     System — Page Families". Pacing pages keep their per-subject
     gradients (the sanctioned "Subject" sub-family) and are NOT in here.

       Assessment  → amber   (appraisals + KPI)
       Curriculum  → teal    (syllabus + authoring tools)
       People      → rose     (directory + credentials)
       Department  → violet   (live coordinator workflow)
       Operations  → slate    (config + record-keeping)
  ─────────────────────────────────────────────────────────────────── */
  --hero-grad-amber:  linear-gradient(140deg, #4a2410 0%, #92400e 45%, #d97706 100%);
  --hero-grad-teal:   linear-gradient(140deg, #042f2e 0%, #0f766e 45%, #14b8a6 100%);
  --hero-grad-rose:   linear-gradient(140deg, #4c0519 0%, #9f1239 45%, #e11d48 100%);
  --hero-grad-violet: linear-gradient(140deg, #1e1b4b 0%, #4c1d95 45%, #7c3aed 100%);
  --hero-grad-slate:  linear-gradient(140deg, #0f172a 0%, #334155 50%, #475569 100%);

  /* Shared hero chrome — same across all three variants */
  --hero-radial-light:  radial-gradient(circle at 12% 70%, rgba(255,255,255,0.07) 0%, transparent 50%);
  --hero-radial-dark:   radial-gradient(circle at 85% 20%, rgba(0,0,0,0.15) 0%, transparent 50%);
  --hero-eyebrow:       rgba(255,255,255,0.55);
  --hero-desc:          rgba(255,255,255,0.68);
  --hero-kpi-bg:        rgba(255,255,255,0.07);
  --hero-kpi-border:    rgba(255,255,255,0.12);
  --hero-kpi-bg-primary:linear-gradient(135deg, rgba(108,92,231,0.32) 0%, rgba(108,92,231,0.18) 100%);
  --hero-kpi-lbl:       rgba(255,255,255,0.6);
  --hero-kpi-sub:       rgba(255,255,255,0.55);

  /* Per-family primary-KPI tile tint (2026-05-27) — the highlighted stat
     tile picks up the family hue so it doesn't read as a stray mor-purple
     on an amber/teal/rose/slate hero. Default --hero-kpi-bg-primary (mor)
     covers Knowledge; cyan/dark reuse mor too (harmonious). The 5 below
     are applied via .page-hero[data-accent=X] .page-hero__kpi--primary. */
  --hero-kpi-bg-primary-amber:  linear-gradient(135deg, rgba(217,119,6,0.34) 0%, rgba(217,119,6,0.18) 100%);
  --hero-kpi-bg-primary-teal:   linear-gradient(135deg, rgba(20,184,166,0.34) 0%, rgba(20,184,166,0.18) 100%);
  --hero-kpi-bg-primary-rose:   linear-gradient(135deg, rgba(225,29,72,0.32) 0%, rgba(225,29,72,0.18) 100%);
  --hero-kpi-bg-primary-violet: linear-gradient(135deg, rgba(124,58,237,0.34) 0%, rgba(124,58,237,0.18) 100%);
  --hero-kpi-bg-primary-slate:  linear-gradient(135deg, rgba(148,163,184,0.30) 0%, rgba(148,163,184,0.15) 100%);

  /* ─── Canonical .page-footer tokens — "induction" (mor-tinted dark) ──
     The My Work / dark-family footer (my-induction, settings, principal
     evaluation, school-leadership pages, …). These were referenced by
     ~25 AH pages (var(--footer-grad-induction) etc.) long before they
     were defined — so those footers silently fell back to no background
     and a flat CTA button. Defining them here restores the intended
     mor-tinted-dark footer in one place. Values mirror the canonical
     defaults baked into .page-footer (var(--hero-grad-dark) + mor/cyan
     ::before glow + mor CTA gradient). */
  --footer-grad-induction:        var(--hero-grad-dark);
  --footer-radial-induction-a:    radial-gradient(circle at 12% 30%, rgba(108,92,231,0.18) 0%, transparent 50%);
  --footer-radial-induction-b:    radial-gradient(circle at 88% 80%, rgba(8,145,178,0.14) 0%, transparent 55%);
  --footer-cta-grad-induction:    linear-gradient(135deg, #7c3aed 0%, #5a4bd1 100%);
  --footer-cta-shadow-induction:  0 4px 14px rgba(108,92,231,0.35);

  /* ─── Family-tinted body backgrounds (2026-05-22) ─────────────────
     Replaces the flat off-white --paper on hero-bearing feature pages
     so the hero gradient flows into a same-family tint instead of an
     abrupt edge. Tints are 3-4% saturated — content cards (var(--white))
     still pop. Apply via <body data-page-accent="cyan|mor|dark">.
     --hero-fade-* is the gradient overlay rendered by .page-hero::after
     (40px height) for an extra-soft hero→body handoff. */
  /* 2026-05-22 v2: tints bumped up from 3-4% to ~8-10% saturation so the
     family colour is actually visible (the first pass was indistinguishable
     from --paper at 100% zoom). Content cards (var(--white)) still pop. */
  --paper-tinted-cyan: #e6eef5;   /* ice — Communication family */
  --paper-tinted-mor:  #ece5f6;   /* lavender — Knowledge family */
  --paper-tinted-dark: #e9e5ec;   /* charcoal — My Work family */
  /* Fade overlay alpha bumped 0.10–0.14 → 0.20–0.24 for a more visible bleed */
  --hero-fade-cyan: linear-gradient(to bottom, rgba(8,145,178,0.22) 0%, rgba(230,238,245,0) 100%);
  --hero-fade-mor:  linear-gradient(to bottom, rgba(108,92,231,0.20) 0%, rgba(236,229,246,0) 100%);
  --hero-fade-dark: linear-gradient(to bottom, rgba(26,21,48,0.24) 0%, rgba(233,229,236,0) 100%);

  /* New-family body tints + fades (2026-05-27) — ~8-10% sat off-white
     sampled from each gradient's vivid stop; fade alpha 0.20-0.24 to
     match the original three. */
  --paper-tinted-amber:  #f3ece2;   /* sand — Assessment family */
  --paper-tinted-teal:   #e3efed;   /* mint — Curriculum family */
  --paper-tinted-rose:   #f4e7eb;   /* blush — People family */
  --paper-tinted-violet: #ebe6f6;   /* iris — Department family */
  --paper-tinted-slate:  #e8ebef;   /* steel — Operations family */
  --hero-fade-amber:  linear-gradient(to bottom, rgba(217,119,6,0.22) 0%, rgba(243,236,226,0) 100%);
  --hero-fade-teal:   linear-gradient(to bottom, rgba(20,184,166,0.22) 0%, rgba(227,239,237,0) 100%);
  --hero-fade-rose:   linear-gradient(to bottom, rgba(225,29,72,0.20) 0%, rgba(244,231,235,0) 100%);
  --hero-fade-violet: linear-gradient(to bottom, rgba(124,58,237,0.20) 0%, rgba(235,230,246,0) 100%);
  --hero-fade-slate:  linear-gradient(to bottom, rgba(71,85,105,0.22) 0%, rgba(232,235,239,0) 100%);

  /* ─── Liveliness pass (2026-05-29) ────────────────────────────────
     The hero was a single static gradient + one faint radial blob on
     every page — colour variety was there (8 families) but every page
     read flat. These tokens drive a richer, brighter, more textured
     hero WITHOUT changing the base --hero-grad-* family identity:

       --hero-mesh-*  : two family-tinted vivid glow blobs (top-right +
                        bottom-left) layered over the base gradient by
                        .page-hero::before. Brightens + adds depth.
       --hero-vivid-* : the family's bright accent (the gradient's vivid
                        stop) — used for the hero icon tint, the title
                        glow, the 3px top accent rule, and content bleed.
       --accent-soft-* : a 12-14% tint of the vivid accent for card
                        top-borders / section-head underlines in the body
                        so the family colour carries past the hero.

     Per-family. Picked by the same data-accent / data-page-accent the
     page already declares — no new per-page markup. See DESIGN_SYSTEM.md
     "Liveliness pass" + root CLAUDE.md Design System section.
  ─────────────────────────────────────────────────────────────────── */
  --hero-vivid-cyan:   #22d3ee;
  --hero-vivid-mor:    #a78bfa;
  --hero-vivid-dark:   #8b80c9;
  --hero-vivid-amber:  #fbbf24;
  --hero-vivid-teal:   #2dd4bf;
  --hero-vivid-rose:   #fb7185;
  --hero-vivid-violet: #a78bfa;
  --hero-vivid-slate:  #94a3b8;

  /* Mesh = two vivid radial blobs that brighten the base gradient.
     Layered UNDER the dot-grid + radial-light chrome by ::before. */
  --hero-mesh-cyan:   radial-gradient(circle at 82% 12%, rgba(34,211,238,0.42) 0%, transparent 46%), radial-gradient(circle at 8% 92%, rgba(125,211,252,0.30) 0%, transparent 50%);
  --hero-mesh-mor:    radial-gradient(circle at 82% 12%, rgba(167,139,250,0.45) 0%, transparent 46%), radial-gradient(circle at 8% 92%, rgba(124,58,237,0.34) 0%, transparent 50%);
  --hero-mesh-dark:   radial-gradient(circle at 82% 12%, rgba(139,128,201,0.34) 0%, transparent 48%), radial-gradient(circle at 8% 92%, rgba(108,92,231,0.26) 0%, transparent 52%);
  --hero-mesh-amber:  radial-gradient(circle at 82% 12%, rgba(251,191,36,0.42) 0%, transparent 46%), radial-gradient(circle at 8% 92%, rgba(234,88,12,0.30) 0%, transparent 50%);
  --hero-mesh-teal:   radial-gradient(circle at 82% 12%, rgba(45,212,191,0.44) 0%, transparent 46%), radial-gradient(circle at 8% 92%, rgba(13,148,136,0.30) 0%, transparent 50%);
  --hero-mesh-rose:   radial-gradient(circle at 82% 12%, rgba(251,113,133,0.42) 0%, transparent 46%), radial-gradient(circle at 8% 92%, rgba(159,18,57,0.30) 0%, transparent 50%);
  --hero-mesh-violet: radial-gradient(circle at 82% 12%, rgba(167,139,250,0.45) 0%, transparent 46%), radial-gradient(circle at 8% 92%, rgba(76,29,149,0.32) 0%, transparent 52%);
  --hero-mesh-slate:  radial-gradient(circle at 82% 12%, rgba(148,163,184,0.36) 0%, transparent 48%), radial-gradient(circle at 8% 92%, rgba(51,65,85,0.30) 0%, transparent 52%);

  /* Soft accent tint for content bleed (card top-borders, section heads).
     ~12-14% of the vivid accent on white — visible but never loud. */
  --accent-soft-cyan:   #cdf3fa;
  --accent-soft-mor:    #e4dcfb;
  --accent-soft-dark:   #ddd9ec;
  --accent-soft-amber:  #fdedc6;
  --accent-soft-teal:   #c8f1eb;
  --accent-soft-rose:   #fdd9df;
  --accent-soft-violet: #e4dcfb;
  --accent-soft-slate:  #dde3ea;

  /* Fine dot-grid texture overlay (single value, family-neutral white).
     Rendered by .page-hero::before on top of the mesh for subtle depth. */
  --hero-dot-grid: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
}