/* ============================================================
   THE ANNOTATED NOTEBOOK — token layer. Single source of truth.
   Scopes match the site's theme boot: html.theme-dark / html.theme-light.
   Rules: student blue = ALL interaction. Examiner red = judgment moments
   ONLY (serif italic voice). Highlighter = key terms only. Functional
   errors use --nb-error (plain UI voice, never the examiner treatment).
   ============================================================ */

html.theme-light {
  background-color: var(--nb-paper);
  /* paper */
  --nb-paper: #F1F2EF;
  --nb-paper-raised: #F8F8F4;
  --nb-paper-sunken: #E6EAE7;
  --nb-chrome: #ECEFEC;
  --nb-grid-dot: rgba(17, 28, 52, 0.045);
  /* ink */
  --nb-ink: #111C34;
  --nb-ink-2: #35415A;
  --nb-ink-3: #5C677B;
  --nb-border: #D8DEE3;
  --nb-border-strong: #7A8795;
  --nb-control-border: #7A8795;
  /* Figure/image frames need a firmer ink wash than the decorative hairline
     against raised paper. The 16% ink mix remains visible without becoming a
     control boundary. Decorative border, no text-contrast requirement. */
  --nb-border-figure: color-mix(in srgb, var(--nb-ink) 16%, transparent);
  /* the three pens */
  --nb-blue: #175BE8;
  --nb-blue-strong: #0B43C7;
  --nb-on-blue: #FFFFFF;
  --nb-blue-wash: #EDF3FF;
  --nb-red: #A33B35;
  --nb-red-wash: #FBEDEC;
  --nb-hl: #DCE8FF;
  /* semantic selection */
  --nb-selection-fill: var(--nb-blue);
  --nb-selection-fill-hover: var(--nb-blue-strong);
  --nb-selection-ink: var(--nb-on-blue);
  --nb-selection-border: var(--nb-blue);
  --nb-selection-marker: transparent;
  --nb-selection-wash: var(--nb-blue-wash);
  --nb-selection-soft-ink: var(--nb-blue-strong);
  --nb-selection-soft-border: var(--nb-blue);
  /* functional (plain UI voice) */
  --nb-error: #9B3028;
  --nb-success: #176B57;
  /* ─ Callout admonition palette (SEMANTIC — see DESIGN.md §2). Each accent
     maps to ONE callout purpose; muted, AA-tuned (each clears 4.5:1 on
     --nb-paper AND on its own tint). The washes are the accent at 5% over
     paper. A deliberate, documented relaxation of the three-ink rule FOR
     CALLOUTS ONLY — never reuse these hues decoratively (still banned candy). ─ */
  --nb-adm-warn: #A33B35;        /* misconception — common error / warning */
  --nb-adm-tip: #176B57;         /* exam-tip — helpful tip */
  --nb-adm-insight: #805914;     /* examiner-insight — examiner's deeper note */
  --nb-adm-key: #175BE8;         /* key-point / key-idea — core concept */
  --nb-adm-def: #21665F;         /* definition — defined term */
  --nb-adm-example: #355A74;     /* illustrative-example — worked illustration */
  --nb-adm-scope: #55635E;       /* out-of-scope — not needed for your tier */
  --nb-adm-mnemonic: #8A4452;    /* mnemonic — memory aid (rose, non-purple h≈344) */
  --nb-adm-mathskill: #236077;   /* math-skill — technique (cyan-blue, non-purple h≈196) */
  --nb-adm-derivation: #31567C;  /* derivation — proof (steel navy, non-purple h≈213) */
  --nb-adm-result: #176B57;      /* WE answer/result — the computed value (emerald h≈153) */
  --nb-adm-interp: #2C607B;      /* WE interpretation — the reading (slate-cyan h≈200) */
  --nb-adm-scenario: #53645E;    /* WE scenario — the problem statement (neutral slate h≈224, 5.5:1 on paper) */
  --nb-adm-proportion: #805914;  /* proportionality — relationship note (bronze h≈41, insight family; 4.9:1 paper / 4.5:1 tint) */
  --nb-adm-tint: 5%;             /* wash strength: accent over paper */
  /* Premium/locked navigation marker — brand blue, worn quietly (owner
     de-yellowed the site 2026-07-13; nav is not a judgment moment). */
  --nb-premium: var(--nb-blue);
  --nb-premium-wash: color-mix(in srgb, var(--nb-premium) 12%, transparent);
  /* Subject identity is limited to actual picker icon plates only. It never
     creates a contextual colour for resources, lesson objectives, or study
     content. */
  --nb-subject-biology: #216747;
  --nb-subject-chemistry: #21665F;
  --nb-subject-physics: #175BE8;
  --nb-subject-mathematics: #355A74;
  --nb-subject-english: #8A4452;
  --nb-subject-economics: #6E553D;
  --nb-subject-icon-wash: 8%;
  --nb-subject-icon-line: 28%;
  /* Resource-type identity is separate from subject identity: decorative
     resource-hub icon plates only, plus the Notes featured wash. It never
     changes a card, control, action, or study surface from semantic blue. */
  --nb-resource-notes: #175BE8;
  --nb-resource-flashcards: #355A74;
  --nb-resource-questions: #8C4A32;
  --nb-resource-summaries: #21665F;
  --nb-resource-videos: #8A4452;
  --nb-resource-pastpapers: #31567C;
  --nb-resource-mocks: #216747;
  --nb-resource-icon-wash: 8%;
  --nb-resource-icon-line: 28%;
  --nb-resource-featured-wash: 12%;
  /* Homepage roles alias canonical resource hues. They are decorative only,
     limited to the surfaces documented in DESIGN.md. */
  --nb-home-recall: var(--nb-resource-flashcards);
  --nb-home-depth: var(--nb-resource-questions);
  --nb-home-check: var(--nb-resource-videos);
  --nb-home-system: var(--nb-resource-summaries);
  --nb-home-card-wash: 5%;
  --nb-home-card-line: 24%;
  --nb-home-icon-wash: 8%;
  --nb-home-icon-line: 28%;
  /* Programme and board identity alias canonical resource hues. Decorative
     only: the picker gateway and board-picker card icon tiles documented in
     DESIGN.md — never a card, chip, control, or interaction colour. */
  --nb-programme-igcse: var(--nb-resource-mocks);
  --nb-programme-alevel: var(--nb-resource-notes);
  --nb-programme-ap: var(--nb-resource-questions);
  --nb-programme-sat: var(--nb-resource-summaries);
  --nb-board-edexcel: var(--nb-resource-notes);
  --nb-board-cie: var(--nb-resource-mocks);
  --nb-programme-icon-wash: 8%;
  --nb-programme-icon-line: 28%;
  /* elevation */
  --nb-shadow-1: 0 1px 3px rgba(17, 28, 52, 0.09);
  --nb-shadow-2: 0 4px 14px rgba(17, 28, 52, 0.12);
  --nb-shadow-3: 0 12px 32px rgba(17, 28, 52, 0.18);
}

/* Legacy-chrome pages (pages/base.html) only toggle .theme-light — dark is the
   ABSENCE of the class there, so the night-desk palette must also bind to
   html:not(.theme-light) for skins layered over legacy surfaces (e.g. the
   subject-resources hub). Equal specificity (0,1,1); nb pages set .theme-dark
   explicitly and resolve identically. */
html.theme-dark,
html:not(.theme-light) {
  /* night desk */
  --nb-paper: #14171D;
  --nb-paper-raised: #1B1F27;
  --nb-paper-sunken: #101318;
  --nb-chrome: var(--nb-paper-raised);
  --nb-grid-dot: rgba(223, 227, 234, 0.07);
  --nb-ink: #DFE3EA;
  --nb-ink-2: #A8B0BC;
  --nb-ink-3: #7E8694;
  --nb-border: #2A2F3A;
  --nb-border-strong: #3A404D;
  --nb-control-border: var(--nb-border);
  /* figure/image frames: the night-desk hairline already reads clearly on the
     raised card, so frames keep the global border value here. */
  --nb-border-figure: var(--nb-border);
  --nb-blue: #7EA6E8;
  --nb-blue-strong: #9DBCEF;
  --nb-on-blue: #14171D;
  --nb-blue-wash: rgba(126, 166, 232, 0.10);
  --nb-red: #E86A5A;
  --nb-red-wash: rgba(232, 106, 90, 0.09);
  --nb-hl: rgba(209, 169, 249, 0.34);
  --nb-selection-fill: var(--nb-blue);
  --nb-selection-fill-hover: var(--nb-blue-strong);
  --nb-selection-ink: var(--nb-on-blue);
  --nb-selection-border: var(--nb-blue);
  --nb-selection-marker: transparent;
  --nb-selection-wash: var(--nb-blue-wash);
  --nb-selection-soft-ink: var(--nb-blue-strong);
  --nb-selection-soft-border: color-mix(in srgb, var(--nb-blue) 28%, transparent);
  --nb-error: #E0655A;
  --nb-success: #6FBF8F;
  /* ─ Callout admonition palette (night desk) — designed, not inverted; each
     AA-tuned on --nb-paper and on its own tint. Semantic, not decorative. ─ */
  --nb-adm-warn: #E86A5A;        /* misconception */
  --nb-adm-tip: #6FBF8F;         /* exam-tip */
  --nb-adm-insight: #D2A24E;     /* examiner-insight */
  --nb-adm-key: #7EA6E8;         /* key-point / key-idea */
  --nb-adm-def: #6FB3AE;         /* definition */
  --nb-adm-example: #9AA6D0;     /* illustrative-example */
  --nb-adm-scope: #8A919E;       /* out-of-scope */
  --nb-adm-mnemonic: #E39BB0;    /* mnemonic — memory aid (rose, non-purple h≈342) */
  --nb-adm-mathskill: #6FC0D6;   /* math-skill — technique (cyan-blue, non-purple h≈193) */
  --nb-adm-derivation: #8AA2CC;  /* derivation — proof (steel navy, non-purple h≈216) */
  --nb-adm-result: #63C694;      /* WE answer/result — the computed value (emerald h≈152) */
  --nb-adm-interp: #7CBFD9;      /* WE interpretation — the reading (slate-cyan h≈197) */
  --nb-adm-scenario: #9AA6C0;    /* WE scenario — the problem statement (neutral slate h≈221, 7.3:1 on paper) */
  --nb-adm-proportion: #DDB05C;  /* proportionality — relationship note (bronze h≈39; 8.9:1 paper / 7.9:1 tint) */
  --nb-adm-tint: 10%;            /* wash strength on the darker night paper */
  --nb-premium: var(--nb-blue);  /* premium/locked marker — brand blue (de-yellowed 2026-07-13) */
  --nb-premium-wash: color-mix(in srgb, var(--nb-premium) 16%, transparent);
  /* Independently tuned for the night desk; actual picker icon plates only. */
  --nb-subject-biology: #70BD91;
  --nb-subject-chemistry: #70BEC1;
  --nb-subject-physics: #8DAFE6;
  --nb-subject-mathematics: #9AA3E0;
  --nb-subject-english: #E09AA6;
  --nb-subject-economics: #C09A80;
  --nb-subject-icon-wash: 10%;
  --nb-subject-icon-line: 34%;
  /* Resource-type identity is separate from subject identity: decorative
     resource-hub icon plates only, plus the Notes featured wash. It never
     changes a card, control, action, or study surface from semantic blue. */
  --nb-resource-notes: #7EA6E8;
  --nb-resource-flashcards: #9AA6D0;
  --nb-resource-questions: #D08A6A;
  --nb-resource-summaries: #6FB3AE;
  --nb-resource-videos: #E39BB0;
  --nb-resource-pastpapers: #8AA2CC;
  --nb-resource-mocks: #6FBF8F;
  --nb-resource-icon-wash: 10%;
  --nb-resource-icon-line: 34%;
  --nb-resource-featured-wash: 16%;
  /* Homepage roles alias canonical resource hues. They are decorative only,
     limited to the surfaces documented in DESIGN.md. */
  --nb-home-recall: var(--nb-resource-flashcards);
  --nb-home-depth: var(--nb-resource-questions);
  --nb-home-check: var(--nb-resource-videos);
  --nb-home-system: var(--nb-resource-summaries);
  --nb-home-card-wash: 9%;
  --nb-home-card-line: 30%;
  --nb-home-icon-wash: 10%;
  --nb-home-icon-line: 34%;
  /* Programme and board identity alias canonical resource hues. Decorative
     only: the picker gateway and board-picker card icon tiles documented in
     DESIGN.md — never a card, chip, control, or interaction colour. */
  --nb-programme-igcse: var(--nb-resource-mocks);
  --nb-programme-alevel: var(--nb-resource-notes);
  --nb-programme-ap: var(--nb-resource-questions);
  --nb-programme-sat: var(--nb-resource-summaries);
  --nb-board-edexcel: var(--nb-resource-notes);
  --nb-board-cie: var(--nb-resource-mocks);
  --nb-programme-icon-wash: 10%;
  --nb-programme-icon-line: 34%;
  --nb-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.35);
  --nb-shadow-2: 0 4px 14px rgba(0, 0, 0, 0.40);
  --nb-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.50);
}

/* theme-independent */
:root {
  --nb-chrome-h: 72px;
  --nb-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nb-serif: "Vollkorn", Georgia, "Times New Roman", serif;
  /* type scale (9 sizes) */
  --nb-text-xs: 0.75rem;
  --nb-text-sm: 0.8125rem;
  --nb-text-base: 0.9375rem;
  --nb-text-md: 1.0625rem;
  --nb-text-lg: 1.25rem;
  --nb-text-xl: 1.5rem;
  --nb-text-2xl: 1.875rem;
  --nb-text-3xl: 2.375rem;
  --nb-text-hero: clamp(2.75rem, 6vw, 5.25rem);
  /* semantic typography roles — consumed during the controlled migration */
  --nb-type-ui: 400 var(--nb-text-base)/1.5 var(--nb-sans);
  --nb-type-prose: 400 var(--nb-text-md)/1.65 var(--nb-sans);
  --nb-type-control: 600 var(--nb-text-base)/1.2 var(--nb-sans);
  --nb-type-label: 600 var(--nb-text-sm)/1.2 var(--nb-sans);
  --nb-type-title: 600 var(--nb-text-lg)/1.3 var(--nb-sans);
  --nb-type-headline: 700 var(--nb-text-2xl)/1.2 var(--nb-sans);
  --nb-type-display: 700 var(--nb-text-hero)/1.05 var(--nb-sans);
  --nb-type-examiner: italic 400 var(--nb-text-md)/1.5 var(--nb-serif);
  --nb-type-editorial: 600 var(--nb-text-xl)/1.25 var(--nb-serif);
  /* spacing (4px base) */
  --nb-s1: 4px;  --nb-s2: 8px;   --nb-s3: 12px; --nb-s4: 16px; --nb-s5: 20px;
  --nb-s6: 24px; --nb-s7: 32px;  --nb-s8: 40px; --nb-s9: 48px; --nb-s10: 64px;
  /* radii (4 steps) */
  --nb-r-sm: 4px; --nb-r-md: 8px; --nb-r-lg: 12px; --nb-r-pill: 999px;
  /* motion (carried from the motion-token foundation; duration-only
     reduced-motion guard stays the site rule) */
  --nb-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nb-dur-1: 120ms; --nb-dur-2: 240ms; --nb-dur-3: 420ms;
  /* paper texture */
  --nb-grid-size: 18px;
}

@media (max-width: 767px) {
  :root { --nb-chrome-h: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --nb-dur-1: 0ms; --nb-dur-2: 0ms; --nb-dur-3: 0ms; }
}