/* Design tokens — canonical scales for colour, type, spacing, motion,
   and corner radius. Loaded as the first stylesheet so every other
   sheet (inline or external) sees these custom properties defined.

   Edit rules:
   - New CSS reaches for var(--…), not literals.
   - Hex colours belong only in :root and the dark-theme override
     below; anywhere else is drift.
   - Adding a value outside the documented scales (e.g. a one-off
     11.5px font size) is a smell — flag it in review.

   The audit linter (scripts/audit_css.py) treats this file as the
   token surface; new tokens added here are automatically picked up
   by its undefined-variable and hex-outside-:root checks. */

:root {
  --ink: #1a1d22;
  --ink-2: #444a55;
  --ink-3: #646a76;
  --paper: #fbfaf6;
  --paper-2: #f6f3e9;
  --card: #ffffff;
  --rule: #e3e0d6;
  --rule-2: #ecead9;
  --accent: #163a5f;
  --accent-2: #c25a2a;
  /* Step-number / hero-kicker navy for the Home page. Tracks
     --accent in both themes today (the home-rebuild "All navy"
     chrome decision) but is its own token so the chrome palette
     can re-split later without touching --accent. Never alias it
     to --accent-2 — that doubles as a data colour. */
  --step-num: #163a5f;
  --shadow: 0 1px 0 rgba(20,20,30,.04), 0 8px 24px -16px rgba(20,20,30,.18);
  /* Strong surface for "active" / "on" UI states (toggle buttons,
     map pill ON, theme tag fill, etc.), floating tooltips and the
     Home page's hero + search bands. The SAME navy as --accent —
     live review (2026-06-10) read the earlier two-navy split
     (#14283f bands vs #163a5f chrome) as a mismatch, so the chrome
     carries one blue. Defined separately from --ink because in
     dark mode --ink flips to light — using it as a background
     there would be unreadable (and dark --accent is a light blue,
     so the dark value stays its own navy below). */
  --surface-strong: #163a5f;
  --surface-strong-ink: #ffffff;

  --th-curriculum_embedding:    #2e7d6c;
  --th-teaching_quality:        #1f5d8a;
  --th-adaptive_teaching:       #a64f9d;
  --th-assessment_gaps:         #6a3d7a;
  --th-reading:                 #c25a2a;
  --th-writing_oracy:           #b85331;
  --th-mathematics:             #b39c1f;
  --th-early_years:             #4a8a5b;
  --th-sixth_form:              #3a6ea5;
  --th-attendance:              #b8862b;
  --th-behaviour_culture:       #8e4030;
  --th-expectations_culture:    #8b572a;
  --th-personal_development:    #3d8567;
  --th-pastoral_wellbeing:      #6a8a4a;
  --th-inclusion_disadvantaged: #936a3a;
  --th-achievement_outcomes:    #2c6e8d;
  --th-leadership_oversight:    #5c5797;
  --th-professional_development: #76528e;
  --th-safeguarding_governance: #a83a3a;
  --th-fe_skills:               #5a6470;
  --th-unclassified:            #aaa;

  /* Generic categorical chart slots — for part-to-whole / multi-series
     charts whose segments are NOT themes, phases or grades (first use:
     the school-card Att8-by-element bar, which previously borrowed
     --th-* / --phase-* tokens and made "English" wear the reading-theme
     colour). Four fixed slots, assigned in order, never cycled.
     Validated (dataviz six-checks, light surface #fbfaf6): lightness
     band, chroma floor, CVD ΔE ≥ 12, contrast ≥ 3:1 all pass. */
  --chart-slot-1: #4a5fc1;
  --chart-slot-2: #c25a2a;
  --chart-slot-3: #0d9488;
  --chart-slot-4: #a04f9e;

  --g-exceptional: #1471c5;
  --g-strong:      #1f8a3a;
  --g-expected:    #69b673;
  --g-attention:   #e89f4a;
  --g-urgent:      #c4393b;
  /* Severer step beyond --g-urgent — a darker maroon. Was the
     Termination Warning Notice (TWN) tier on trust timelines; that tier
     has been merged into the single --g-urgent "warning notice" colour,
     so this token is currently unused — kept for a future escalation
     tier rather than re-deriving the maroon from scratch. */
  --g-severe:      #8b1d1f;
  /* RISE targeted-support marker — a distinct orange, deliberately set
     between the amber "needs attention" grade (--g-attention) and the red
     warning notice (--g-urgent) so the trust-timeline entry triangle reads
     as "support", not alarm. NOT a grade colour; its own token so it can
     never conflate with the grade ramp. */
  --rise:          #e0660f;
  /* Per-grade text ink for content sat directly on the grade fill
     (column-header letters, chip text). Light fills (expected,
     attention) need dark text to clear WCAG AA 4.5:1; saturated
     fills take white. */
  --g-exceptional-ink: #ffffff;
  --g-strong-ink:      #ffffff;
  --g-expected-ink:    #1a1d22;
  --g-attention-ink:   #1a1d22;
  --g-urgent-ink:      #ffffff;
  --g-met:         #3a6ea5;

  /* Teacher-turnover flow segments (stacked workforce board) — a
     green→amber→red partition of last year's teaching cohort:
     stayed at the school / moved to another state school / left the
     state sector. Their own semantic handle (not the grade tokens) so
     the flow chart's meaning isn't coupled to the grade system. Literal
     hexes — not `var(--g-*)` aliases — because the leaderboard reads
     these as Plot SVG fills via getPropertyValue, which doesn't resolve
     custom-property indirection (same reason --phase-* are literals).
     Values track the grade ramp; dark-mode overrides below. */
  --flow-stay:  #1f8a3a;
  --flow-move:  #e89f4a;
  --flow-leave: #c4393b;

  --pos: #1f8a3a;
  --neg: #c4393b;

  /* Needs-review (monitoring/watch) state — amber warning badge on
     reports that are flagged for editorial attention. Distinct from
     the grade palette so the badge reads as a meta-flag, not a grade.
     Dark-mode override required (light amber on dark card is readable;
     pale background is not). */
  --needs-review-ink:    #92400e;
  --needs-review-border: #fcd34d;
  --needs-review-bg:     #fffbeb;

  /* Phase-group tints, used by the phase-stacked theme chart and
     the .seg[data-phase] segment swatches in reports.css. Same hex
     in dark mode (the colours are saturated enough to read on both
     surfaces); if that changes, add overrides under the dark block. */
  --phase-primary:   #2e7d6c;
  --phase-secondary: #1f5d8a;
  --phase-special:   #6a3d7a;
  /* Academy governance marker — distinguishes academy-trust schools
     from LA-maintained in the Map-tab zero-inspected LA summary. A
     distinct magenta so it reads apart from the phase tints. */
  --gov-academy:     #b04a8a;

  /* Sequential teal ramp — "Well below average" → "Well above average" for
     characteristic-band choropleth markers and legend on the Map tab.
     Light-teal (below) → dark-teal (above) so the eye reads magnitude,
     not grade direction. Same hex in dark mode; if contrast proves
     insufficient, add overrides in the dark block below. */
  --band-1: #dbeef0;  /* Well below average */
  --band-2: #a8d5db;  /* Below average */
  --band-3: #6fb1ba;  /* Close to average */
  --band-4: #3b8a96;  /* Above average */
  --band-5: #1d5a64;  /* Well above average */

  /* Ofsted toolkit area palette — drives the per-area cluster
     colours on the Themes-tab toolkit-by-area chart. Nine areas
     match the Nov 2025 toolkit structure. Several values overlap
     with other palettes (e.g. --toolkit-curriculum_teaching shares
     hex with --th-teaching_quality) — that's deliberate, the eye
     reads the area cluster the same way wherever it appears. */
  --toolkit-curriculum_teaching:   #1f5d8a;
  --toolkit-inclusion:             #a64f9d;
  --toolkit-achievement:           #2c6e8d;
  --toolkit-attendance_behaviour:  #b8862b;
  --toolkit-pd_wellbeing:          #3d8567;
  --toolkit-early_years:           #4a8a5b;
  --toolkit-post16:                #3a6ea5;
  --toolkit-leadership:            #5c5797;
  --toolkit-safeguarding:          #a83a3a;

  /* Pupil-group palette — drives the bullet-frequency-by-pupil-group
     chart on the Themes tab. Twelve groups (12 named tags + the
     default 'all pupils' bucket). Several values overlap with
     --th-* and --toolkit-* deliberately (same group, same colour). */
  --pg-all_pupils:    #1f5d8a;
  --pg-disadvantaged: #936a3a;
  --pg-send:          #a64f9d;
  --pg-eal:           #3a6ea5;
  --pg-social_care:   #a83a3a;
  --pg-vulnerable:    #8e4030;
  --pg-eyfs:          #4a8a5b;
  --pg-ks1:           #2e7d6c;
  --pg-ks2:           #3d8567;
  --pg-ks3:           #6a8a4a;
  --pg-ks4:           #b39c1f;
  --pg-post16:        #5c5797;

  /* Compare-panel characteristics band ramp — "Well above average"
     (dark navy) → "Well below average" (pale grey). A blue-grey scale
     rather than teal so it reads as a different metric from the map's
     teal band ramp. Dark-mode overrides required (light greys vanish
     on dark backgrounds). */
  --comp-band-5: #1f3a5f;  /* Well above average */
  --comp-band-4: #4d6e94;  /* Above average */
  --comp-band-3: #9aa8bf;  /* Close to average */
  --comp-band-2: #c5cbd4;  /* Below average */
  --comp-band-1: #e2e5e9;  /* Well below average */

  /* ────────────────────────────────────────────────────────────
     Design tokens — canonical scales for spacing, type, motion,
     and corners. New CSS should reach for these rather than
     hardcoding values; existing rules will migrate to them
     progressively. Adding a value outside one of these scales is
     a smell — flag it in review.
     ──────────────────────────────────────────────────────────── */

  /* Type — px, integer steps. nano/xs/sm/base/md/lg/xl cover labels
     (nano/xs/sm), body (base/md), and headings (lg/xl). The numeric
     --text-9 / --text-10 aliases extend the lower scale for micro-
     copy that needs to sit a step below --text-xs (carets, mini-axis
     ticks, timeline tick labels, trust-history-event tags). --text-10
     is a deliberate alias of --text-nano so future micro-copy can opt
     in to either naming. */
  --text-9:     9px;    /* sub-nano micro-text: timeline tick labels, mini-caret glyphs */
  --text-10:    10px;   /* alias of --text-nano — sub-eyebrow labels, dense badges */
  --text-nano:  10px;   /* sub-eyebrow labels, dense badges, chart annotations, fine-print captions */
  --text-xs:    11px;   /* eyebrow labels, count badges, small captions */
  --text-sm:    12px;   /* sub-labels, chart axis labels */
  --text-base:  13px;   /* small body, form inputs */
  --text-md:    14px;   /* body, card text, bullet text */
  --text-lg:    17px;   /* chart-card h3 */
  --text-xl:    22px;   /* tab-content h2 */

  /* Line-height — unitless ratios so they scale with font-size. */
  --lh-tight:   1.2;    /* chip / pill labels */
  --lh-base:    1.5;    /* prose / chart subtitles */
  --lh-loose:   1.6;    /* About-tab paragraphs */

  /* Letter-spacing — em units. Use eyebrow on uppercase 11/12px
     labels; wide on button labels; default elsewhere. */
  --track-default: 0;
  --track-wide:    0.04em;
  --track-eyebrow: 0.06em;

  /* Spacing — 4px grid. Most card/component paddings sit at
     space-3, space-4 or space-5. Use space-1/2 for tight inline
     gaps; space-6+ for section-level breathing room. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* Page shell — the shared centred column that .main-inner, the tab
     bar / active-filters-strip inset, and the Home band caps all line
     up against. One definition so the column can't drift out of sync
     across those call sites (base.css:566, ~678, ~764;
     tabs/home.css:77). */
  --page-max:    1400px;
  --page-gutter: 28px;

  /* Motion — durations only; easing stays in the rule. fast for
     hover/focus state changes; medium for bigger state transitions
     like tab activation; slow only for chart-segment animations
     that need to feel deliberate. */
  --t-fast:   0.12s;
  --t-medium: 0.2s;
  --t-slow:   0.35s;

  /* Corner radius — sm for inline controls, md for buttons /
     inputs, lg for cards, full for pills. */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-full: 999px;

  /* Sticky offset for the profile section-nav. Default 0; the nav JS
     (components/section-nav.js) overrides it per-instance with the
     measured main-tab-bar height so the nav sits directly below it. */
  --section-nav-top: 0px;

  /* Surface hover — semi-transparent overlay used by sidebar rows,
     map pills, etc. on hover. Defined as a token (not literal
     rgba) so dark mode flips it cleanly. */
  --surface-hover: color-mix(in srgb, var(--ink) 6%, transparent);

  /* Interaction tokens — reusable focus ring, touch target, and
     button padding. A single definition so the whole UI stays
     consistent when the values are tweaked. */
  --focus-ring:        2px solid var(--accent);
  --focus-ring-offset: 2px;
  --touch-target-min:  44px;
  --button-pad-sm:     4px 10px;
  --button-pad-md:     6px 14px;
  --empty-state-pad:   24px 0;
}

/* Dark theme — applied via data-theme="dark" on <html>. Only the
   neutral palette flips (ink / paper / card / rule / shadow); the
   grade and theme colour scales stay as-is so charts read the same.
   Grade swatches get slightly lifted brightness so they don't go
   muddy against the dark card background.
   Toggle lives in the tab bar (button id="theme-toggle"). Preference
   is persisted to localStorage; first-time visitors always see light
   mode. */
html[data-theme="dark"] {
  --ink:    #e8eaee;
  --ink-2:  #b8bcc4;
  --ink-3:  #9398a1;
  --paper:  #14161a;
  --paper-2:#1c1f24;
  --card:   #20242a;
  --rule:   #2d323a;
  --rule-2: #262a31;
  --accent: #5da7e8;
  --accent-2: #e89569;
  /* Tracks dark --accent, exactly as the light value tracks light
     --accent: navy text on dark paper would vanish, so the token
     lifts to the same readable blue (7.0:1 on --paper). */
  --step-num: #5da7e8;
  --shadow: 0 1px 0 rgba(0,0,0,.30), 0 8px 24px -16px rgba(0,0,0,.55);
  /* Chart slots lifted for the dark surface (validated against
     #14161a: all six checks pass). */
  --chart-slot-1: #5b74e0;
  --chart-slot-2: #d2703f;
  --chart-slot-3: #16a596;
  --chart-slot-4: #b565b3;
  --g-exceptional: #4ea2e8;
  --g-strong:      #3eaa57;
  --g-expected:    #7fc789;
  --g-attention:   #f0b063;
  --g-urgent:      #d65557;
  --g-severe:      #a83d3f;
  /* RISE targeted-support marker — brighter orange for the dark ramp. */
  --rise:          #f0852f;
  /* Turnover flow segments — track the brighter dark-mode grade ramp. */
  --flow-stay:  #3eaa57;
  --flow-move:  #f0b063;
  --flow-leave: #d65557;
  /* Dark-mode grade fills are lighter / brighter; dark text wins
     across the board (white text fails AA on every fill here). */
  --g-exceptional-ink: #14161a;
  --g-strong-ink:      #14161a;
  --g-expected-ink:    #14161a;
  --g-attention-ink:   #14161a;
  --g-urgent-ink:      #14161a;
  --g-met:         #5a8fc7;
  --pos: #3eaa57;
  --neg: #d65557;
  /* Navy-tinted lift of the light theme's #14283f (same ~212° hue,
     raised to the old #3d4654's lightness) so tooltips and ON
     states still stand off the dark card while white ink keeps
     9.7:1 contrast. */
  --surface-strong: #31465f;
  --surface-strong-ink: #ffffff;
  --needs-review-ink:    #fcd34d;
  --needs-review-border: #854d0e;
  --needs-review-bg:     #3a2a0e;
  --comp-band-5: #6a9bd4;
  --comp-band-4: #557da8;
  --comp-band-3: #6c7686;
  --comp-band-2: #555d6a;
  --comp-band-1: #3a414c;
}

/* ────────────────────────────────────────────────────────────
   Home display scale — the landing tab's outsized serif numerals
   (hero H1 + step-rail numbers). Appended at end-of-file (home
   rebuild PR B) so in-flight token edits above merge cleanly.
   Same values in dark mode — no override needed.
   ──────────────────────────────────────────────────────────── */
:root {
  --text-display:  42px;  /* Home hero H1 (Charter, .lp-home-h1) */
  --text-step-num: 56px;  /* Home step-rail numerals (.lp-step-n) */
}