/* Acadence design tokens. GENERATED from Figma file uPehQXzXwP8EjInzP3mt2H
 * (collections Brand x Theme x Paper x Space, read 2026-10-26) by t5-gen-tokens.mjs. Do not hand-edit:
 * change the Figma variable, re-run the generator.
 *
 * Usage: put the attributes on <html> (all custom properties are resolved there):
 *   <html data-brand="a|b|c" data-theme="light|dark|auto">
 *   - data-brand missing  -> brand A (Quiet Study) defaults below.
 *   - data-theme missing or "auto" -> follows prefers-color-scheme.
 *   - data-theme="light" / "dark" -> forced.
 * Components use ONLY the semantic names (--ac-bg-*, --ac-text-*, --ac-border-*, --ac-accent-*,
 * --ac-status-*, --ac-mark-*, --ac-paper-*, --ac-space-*, --ac-radius-*, --ac-font-*).
 * --ac-l-* / --ac-d-* are private brand ramps (Figma Brand light/* dark/*, hidden scopes) - never use them.
 *
 * Existing preference: classes/page.php (origin/feat/ai-core-pilot) reads the user preference
 * local_worksheet_theme (dark|light, default dark); classes/hook_callbacks.php prints it on <html> as data-bs-theme.
 * Keep data-bs-theme = the EFFECTIVE theme (Bootstrap and acadence.scss key on it) and add data-theme = the CHOICE
 * (light|dark|auto); see t5-build.md section 1.
 *
 * Paper (--ac-paper-*) is constant in every brand and theme: never theme, never invert the worksheet.
 */

/* ---- Brand A (default) + Light theme (default) + constants ---- */
:root, [data-brand="a"] {
  --ac-l-canvas: #f6f4ef;
  --ac-d-canvas: #14171a;
  --ac-l-surface: #ffffff;
  --ac-d-surface: #1c2024;
  --ac-l-raised: #efece5;
  --ac-d-raised: #242a2f;
  --ac-l-border: #e2ded4;
  --ac-d-border: #2e353b;
  --ac-l-border-strong: #c9c4b8;
  --ac-d-border-strong: #444d55;
  --ac-l-text: #1f2328;
  --ac-d-text: #e7e9ea;
  --ac-l-muted: #5b636b;
  --ac-d-muted: #a3abb3;
  --ac-l-accent: #1f6f66;
  --ac-d-accent: #6cc2b5;
  --ac-l-accent-hover: #185a53;
  --ac-d-accent-hover: #86d0c5;
  --ac-l-on-accent: #ffffff;
  --ac-d-on-accent: #0e1513;
  --ac-l-accent-subtle: #dcedea;
  --ac-d-accent-subtle: #1d3532;
  --ac-l-accent-text: #17594f;
  --ac-d-accent-text: #8fd6cb;
  --ac-l-highlight: #f6e3b4;
  --ac-d-highlight: #5a4a22;
  --ac-l-surround: #e9e5dc;
  --ac-d-surround: #2a2f34;
  --ac-mark-tick: #1e7a5c;
  --ac-mark-half: #a86a00;
  --ac-mark-fix: #c0452f;
  --ac-mark-unsure: #a86a00;
  --ac-font-heading: "Newsreader", Georgia, serif;
  --ac-font-ui: "Hanken Grotesk", system-ui, sans-serif;
  --ac-font-num: "Hanken Grotesk", system-ui, sans-serif;
  --ac-font-hand: "Caveat", cursive;
  --ac-radius-control: 12px;
  --ac-radius-panel: 16px;
  --ac-radius-pill: 999px;
}
[data-brand="b"] {
  --ac-l-canvas: #f4f5f7;
  --ac-d-canvas: #0f1114;
  --ac-l-surface: #ffffff;
  --ac-d-surface: #171a1f;
  --ac-l-raised: #eef0f3;
  --ac-d-raised: #1f232a;
  --ac-l-border: #e1e4e9;
  --ac-d-border: #2a2f37;
  --ac-l-border-strong: #c4c9d1;
  --ac-d-border-strong: #3d444f;
  --ac-l-text: #0e1116;
  --ac-d-text: #e8eaed;
  --ac-l-muted: #555d69;
  --ac-d-muted: #9ba3af;
  --ac-l-accent: #2b54d6;
  --ac-d-accent: #8aa6ff;
  --ac-l-accent-hover: #2247b8;
  --ac-d-accent-hover: #a3b8ff;
  --ac-l-on-accent: #ffffff;
  --ac-d-on-accent: #0b0f1a;
  --ac-l-accent-subtle: #e3e9fb;
  --ac-d-accent-subtle: #1c2540;
  --ac-l-accent-text: #2247b8;
  --ac-d-accent-text: #a9bcff;
  --ac-l-highlight: #fff1b8;
  --ac-d-highlight: #4a4220;
  --ac-l-surround: #e6e8ec;
  --ac-d-surround: #262a31;
  --ac-mark-tick: #1f8a57;
  --ac-mark-half: #b7791f;
  --ac-mark-fix: #c93a2b;
  --ac-mark-unsure: #b7791f;
  --ac-font-heading: "Geist", system-ui, sans-serif;
  --ac-font-ui: "Geist", system-ui, sans-serif;
  --ac-font-num: "Geist Mono", ui-monospace, monospace;
  --ac-font-hand: "Patrick Hand", cursive;
  --ac-radius-control: 8px;
  --ac-radius-panel: 10px;
  --ac-radius-pill: 999px;
}
[data-brand="c"] {
  --ac-l-canvas: #faf9f5;
  --ac-d-canvas: #15140f;
  --ac-l-surface: #ffffff;
  --ac-d-surface: #1e1d17;
  --ac-l-raised: #f1efe8;
  --ac-d-raised: #27261f;
  --ac-l-border: #e4e1d6;
  --ac-d-border: #34332a;
  --ac-l-border-strong: #cbc7b9;
  --ac-d-border-strong: #4a483d;
  --ac-l-text: #22201c;
  --ac-d-text: #eceae3;
  --ac-l-muted: #5e5a52;
  --ac-d-muted: #aba79b;
  --ac-l-accent: #0f7b5f;
  --ac-d-accent: #3fcb9f;
  --ac-l-accent-hover: #0b664e;
  --ac-d-accent-hover: #63d7b2;
  --ac-l-on-accent: #ffffff;
  --ac-d-on-accent: #08130f;
  --ac-l-accent-subtle: #ddf0e8;
  --ac-d-accent-subtle: #173229;
  --ac-l-accent-text: #0b664e;
  --ac-d-accent-text: #6fddb8;
  --ac-l-highlight: #f4c430;
  --ac-d-highlight: #8a6e12;
  --ac-l-surround: #ece9df;
  --ac-d-surround: #2b2a22;
  --ac-mark-tick: #0f7b5f;
  --ac-mark-half: #b98a00;
  --ac-mark-fix: #2f5fd0;
  --ac-mark-unsure: #b7791f;
  --ac-font-heading: "Fraunces", Georgia, serif;
  --ac-font-ui: "Figtree", system-ui, sans-serif;
  --ac-font-num: "Figtree", system-ui, sans-serif;
  --ac-font-hand: "Kalam", cursive;
  --ac-radius-control: 14px;
  --ac-radius-panel: 20px;
  --ac-radius-pill: 999px;
}

:root {
  --ac-paper-sheet: #ffffff;
  --ac-paper-rule: #d3e2f1;
  --ac-paper-margin: #ee9aa0;
  --ac-paper-student-ink: #1f4fb8;
  --ac-paper-black-ink: #1a1a1a;
  --ac-paper-classic-red: #c62534;
  --ac-paper-printed: #2a2a2a;
  /* Score box on the paper (Figma MK-SCORE 561:33): the paper is always light, so these never change with the theme. */
  --ac-paper-focus: #1f6f66;
  --ac-paper-attention: #8a5a00;
  --ac-paper-fix-bg: #fdf3dc;
  --ac-paper-danger: #b3412e;
  --ac-paper-danger-bg: #f8e3de;
  --ac-paper-info: #2f5e8c;
  --ac-paper-callout: #efece5;
  --ac-space-4: 4px;
  --ac-space-8: 8px;
  --ac-space-12: 12px;
  --ac-space-16: 16px;
  --ac-space-20: 20px;
  --ac-space-24: 24px;
  --ac-space-32: 32px;
  --ac-space-48: 48px;
}

/* ---- Light (default, and forced) ---- */
:root, [data-theme="light"] {
  color-scheme: light;
  --ac-bg-canvas: var(--ac-l-canvas);
  --ac-bg-surface: var(--ac-l-surface);
  --ac-bg-raised: var(--ac-l-raised);
  --ac-bg-surround: var(--ac-l-surround);
  --ac-border-default: var(--ac-l-border);
  --ac-border-strong: var(--ac-l-border-strong);
  --ac-text-default: var(--ac-l-text);
  --ac-text-muted: var(--ac-l-muted);
  --ac-text-on-accent: var(--ac-l-on-accent);
  --ac-accent-solid: var(--ac-l-accent);
  --ac-accent-hover: var(--ac-l-accent-hover);
  --ac-accent-subtle: var(--ac-l-accent-subtle);
  --ac-accent-text: var(--ac-l-accent-text);
  --ac-accent-highlight: var(--ac-l-highlight);
  --ac-status-ok: #2a7454;
  --ac-status-ok-bg: #e1f1e8;
  --ac-status-warn: #8a5a00;
  --ac-status-warn-bg: #fbefd5;
  --ac-status-danger: #b3412e;
  --ac-status-danger-bg: #f8e3de;
  --ac-status-info: #2f5e8c;
  --ac-status-info-bg: #e2ecf6;
  /* Progress levels (progress-redesign SPEC 3, contrast checked with a WCAG script; re-run it before changing a hex): one amber for
     "just started", then a blue ramp; no marked work = hatched grey. Each fill has its icon colour (-ink) and a 1.5px -edge (>= 3:1). */
  --ac-level-attempted: #F6C66B; --ac-level-attempted-ink: #3D2A00; --ac-level-attempted-edge: #A86B00;
  --ac-level-familiar: #BFDDF5; --ac-level-familiar-ink: #10294A; --ac-level-familiar-edge: #4F86BF;
  --ac-level-proficient: #5B9BD5; --ac-level-proficient-ink: #06182E; --ac-level-proficient-edge: #2F6AA8;
  --ac-level-mastered: #1F4E8C; --ac-level-mastered-ink: #FFFFFF; --ac-level-mastered-edge: #1F4E8C;
  --ac-level-none: #F1F3F5; --ac-level-none-ink: #495057; --ac-level-none-edge: #7D868F; --ac-level-none-hatch: #CED4DA;
  --ac-attention: #B45309; --ac-attention-bg: #FDF3E1;
}

/* ---- Dark (forced) ---- */
[data-theme="dark"] {
  color-scheme: dark;
  --ac-bg-canvas: var(--ac-d-canvas);
  --ac-bg-surface: var(--ac-d-surface);
  --ac-bg-raised: var(--ac-d-raised);
  --ac-bg-surround: var(--ac-d-surround);
  --ac-border-default: var(--ac-d-border);
  --ac-border-strong: var(--ac-d-border-strong);
  --ac-text-default: var(--ac-d-text);
  --ac-text-muted: var(--ac-d-muted);
  --ac-text-on-accent: var(--ac-d-on-accent);
  --ac-accent-solid: var(--ac-d-accent);
  --ac-accent-hover: var(--ac-d-accent-hover);
  --ac-accent-subtle: var(--ac-d-accent-subtle);
  --ac-accent-text: var(--ac-d-accent-text);
  --ac-accent-highlight: var(--ac-d-highlight);
  --ac-status-ok: #6ccb98;
  --ac-status-ok-bg: #19302a;
  --ac-status-warn: #e8b755;
  --ac-status-warn-bg: #33291a;
  --ac-status-danger: #f08a78;
  --ac-status-danger-bg: #3a221e;
  --ac-status-info: #8db8e8;
  --ac-status-info-bg: #1b2a3a;
  --ac-level-attempted: #E0A93B; --ac-level-attempted-ink: #2A1D00; --ac-level-attempted-edge: #E0A93B;
  --ac-level-familiar: #3A6EA5; --ac-level-familiar-ink: #FFFFFF; --ac-level-familiar-edge: #6E9ED0;
  --ac-level-proficient: #7FB4E8; --ac-level-proficient-ink: #07192E; --ac-level-proficient-edge: #7FB4E8;
  --ac-level-mastered: #CFE6FF; --ac-level-mastered-ink: #08203D; --ac-level-mastered-edge: #CFE6FF;
  --ac-level-none: #262C36; --ac-level-none-ink: #AEB6C2; --ac-level-none-edge: #6B7585; --ac-level-none-hatch: #3A4250;
  --ac-attention: #E0A93B; --ac-attention-bg: #33291A;
}

/* ---- Auto: follow the device when no theme is forced ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
  color-scheme: dark;
  --ac-bg-canvas: var(--ac-d-canvas);
  --ac-bg-surface: var(--ac-d-surface);
  --ac-bg-raised: var(--ac-d-raised);
  --ac-bg-surround: var(--ac-d-surround);
  --ac-border-default: var(--ac-d-border);
  --ac-border-strong: var(--ac-d-border-strong);
  --ac-text-default: var(--ac-d-text);
  --ac-text-muted: var(--ac-d-muted);
  --ac-text-on-accent: var(--ac-d-on-accent);
  --ac-accent-solid: var(--ac-d-accent);
  --ac-accent-hover: var(--ac-d-accent-hover);
  --ac-accent-subtle: var(--ac-d-accent-subtle);
  --ac-accent-text: var(--ac-d-accent-text);
  --ac-accent-highlight: var(--ac-d-highlight);
  --ac-status-ok: #6ccb98;
  --ac-status-ok-bg: #19302a;
  --ac-status-warn: #e8b755;
  --ac-status-warn-bg: #33291a;
  --ac-status-danger: #f08a78;
  --ac-status-danger-bg: #3a221e;
  --ac-status-info: #8db8e8;
  --ac-status-info-bg: #1b2a3a;
  --ac-level-attempted: #E0A93B; --ac-level-attempted-ink: #2A1D00; --ac-level-attempted-edge: #E0A93B;
  --ac-level-familiar: #3A6EA5; --ac-level-familiar-ink: #FFFFFF; --ac-level-familiar-edge: #6E9ED0;
  --ac-level-proficient: #7FB4E8; --ac-level-proficient-ink: #07192E; --ac-level-proficient-edge: #7FB4E8;
  --ac-level-mastered: #CFE6FF; --ac-level-mastered-ink: #08203D; --ac-level-mastered-edge: #CFE6FF;
  --ac-level-none: #262C36; --ac-level-none-ink: #AEB6C2; --ac-level-none-edge: #6B7585; --ac-level-none-hatch: #3A4250;
  --ac-attention: #E0A93B; --ac-attention-bg: #33291A;
  }
}

/* Paper dimming (PLAN.md 6.2): dim sheet AND ink together, never ink alone.
 * .ac-paper { background: var(--ac-paper-sheet); filter: brightness(var(--ac-paper-brightness)); }
 * The slider sets --ac-paper-brightness between 0.8 and 1 on <html>. Named -brightness, not -dim:
 * the old theme already defines --ac-paper-dim as a filter value (left as is by the bridge). */
:root { --ac-paper-brightness: 1; }

:root { --ac-motion: 150ms; }
@media (prefers-reduced-motion: reduce) {
  :root { --ac-motion: 0ms; }
}

/* ---- Bridge: re-skin the CURRENT CSS without touching its selectors ----
 * ui.css, teacher.css, practice.css, admin.css and theme/acadence.scss use the old names below.
 * Pointing them at the new tokens re-skins every existing page in one step (rollout phase 1).
 * html:root (0,1,1) beats acadence.scss's :root and [data-bs-theme="light"] (0,1,0).
 * Load this file ONLY when the new-look switch is on (it sets color-scheme and overrides old values).
 * Delete this block when no old name is left (phase 6). */
html:root {
  --ac-bg: var(--ac-bg-canvas);
  --ac-surface: var(--ac-bg-surface);
  --ac-surface-2: var(--ac-bg-raised);
  --ac-input: var(--ac-bg-surface);
  --ac-desk: var(--ac-bg-surround);
  --ac-line: var(--ac-border-default);
  --ac-line-strong: var(--ac-border-strong);
  --ac-text: var(--ac-text-default);
  --ac-text-2: var(--ac-text-default);
  --ac-muted: var(--ac-text-muted);
  --ac-accent: var(--ac-accent-text);
  --ac-primary: var(--ac-accent-solid);
  --ac-primary-hover: var(--ac-accent-hover);
  --ac-on-primary: var(--ac-text-on-accent);
  --ac-focus: var(--ac-accent-solid);
  --ac-success: var(--ac-status-ok);
  --ac-success-bg: var(--ac-status-ok-bg);
  --ac-danger: var(--ac-status-danger);
  --ac-danger-bg: var(--ac-status-danger-bg);
  --ac-warn: var(--ac-status-warn);
  --ac-warn-bg: var(--ac-status-warn-bg);
  --ac-chart-correct: var(--ac-mark-tick);
  --ac-chart-partial: var(--ac-mark-half);
  --ac-chart-incorrect: var(--ac-mark-fix);
  --ac-paper: var(--ac-paper-sheet);
  --ac-mark: var(--ac-paper-classic-red);
  --ac-ink: var(--ac-paper-student-ink);
  /* --ac-paper-dim stays the old brightness(.8) toggle until the slider ships (phase 3). */
}
/* Fonts: the old CSS hard-codes "Atkinson Hyperlegible Next" / "Bricolage Grotesque" on .ws and headings;
 * phase 1 swaps those two declarations in ui.css for var(--ac-font-ui) / var(--ac-font-heading) and self-hosts the
 * chosen brand's woff2 files under fonts/ (OFL, like today; no Google Fonts CDN at runtime). */