/* Repwise Math design tokens: the ONE definition (Tess, 2026-10-18). Extracted unchanged from the Open Design design system (steptwin) that every mock shared, byte for byte. Every mock and the built app link this file; nothing else declares these variables. Component knobs (for example --sheet-max) live with their component in components.css, not here. Changing a token here changes it everywhere: that is the point. THE ONE CANONICAL FILE. The Open Design design system's tokens.css is its origin; do not copy that one (it imports Google Fonts). The build copies this file and points the @font-face src lines at its own self-hosted font files (D10); that path change is the only edit allowed. */ @font-face { font-family: "Repwise Digits"; font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0030-0039; src: url("./fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Repwise Digits"; font-style: normal; font-weight: 500; font-display: swap; unicode-range: U+0030-0039; src: url("./fonts/source-sans-3-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Repwise Digits"; font-style: normal; font-weight: 600; font-display: swap; unicode-range: U+0030-0039; src: url("./fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); } :root { /* --- Neutrals: warm paper, green-black ink (70–90% of pixels) -------- */ --bg: #FAF8F3; /* warm off-white canvas, never pure white */ --surface: #F2EEE4; /* raised: input wells, sheets, the math well */ --surface-sunk: #E9E4D8; /* pressed / selected */ --fg: #17201B; /* ink. 15.7:1 on --bg */ --muted: #56605A; /* secondary text. 6.2:1 on --bg, 5.6 on surface */ --border: #E2DDD0; /* hairline rules (decorative, not a boundary) */ --border-strong: #7E8680; /* input / control boundary. 3.5:1 on --bg */ /* --- Brand: deep forest green (Imprint's trust) --------------------- */ --brand: #1F5C46; /* wordmark, headings accents, focus ring, selected states. 7.4:1 on --bg; white or --bg text on it 7.4–7.8:1 */ --brand-wash: #E3F0E8; /* the one tinted brand surface (the banner) */ /* --- Accent: ONE bright action green -------------------------------- */ /* Reserved for the single primary action per screen (Next step / Snap worksheet / Check answer). Never text, never status, never decoration. White text fails on it (2.4:1), so its label is --on-accent (6.4:1). The fill is only 2.3:1 against --bg, so the button carries a --accent-edge bottom edge (3.3:1 vs the fill, 7.4:1 vs --bg) — that edge is the component boundary for WCAG 1.4.11. */ --accent: #2FBF71; --accent-press: #29A863; --on-accent: #0E2A1F; --accent-edge: #1F5C46; /* --- Semantic: quiet tints, always paired with a glyph -------------- */ --success: #1E6B45; --success-wash: #E8F2EA; /* 5.7:1 on wash */ --warn: #8A5A00; --warn-wash: #FBF1DF; /* "partway" / "simplify" */ --info: #2B4A6B; --info-wash: #E9EEF4; /* AI disclosure, notices */ --danger: #9A3B2A; --danger-wash: #F9ECE8; /* refusals only — never for a wrong answer */ --focus: var(--brand); /* 2px ring, 2px offset */ /* --- Change marks: "what changed in this step" (added 2026-10-14) ---- Highlighter tints BEHIND math; the math itself stays --fg ink (12.8–13.1:1 on every mark). Never the only signal: always paired with an ink underline. --mark-1 is the default single mark; -2 and -3 exist only to pair a term in the previous line with what it became in the new line. */ --mark-1: #CDEBD8; /* green */ --mark-2: #F5E2B0; /* amber */ --mark-3: #D6E3F3; /* blue */ /* --- Type ------------------------------------------------------------ */ --font-display: "Source Serif 4", "Iowan Old Style", Georgia, serif; --font-ui: "Repwise Digits", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif; --font-math: "KaTeX_Main", "Latin Modern Math", "STIX Two Math", "Cambria Math", serif; --font-dyslexic: "Lexend", "Atkinson Hyperlegible Next", sans-serif; /* 1.25 scale, phone-first. Body never below 17px; math never below 20px. */ --text-sm: 0.875rem; /* 14 — metadata only */ --text-base: 1.0625rem; /* 17 — body floor */ --text-md: 1.25rem; /* 20 */ --text-lg: 1.5625rem; /* 25 — screen headline on phone */ --text-xl: 2rem; /* 32 — desktop headline */ --math: 1.375rem; /* 22 — a step's math line */ --math-hero: 1.875rem; /* 30 — the hero equation */ /* Type roles (Tess, 2026-10-27, for Jeff's "every size from one file"): one variable per job, each pointing at a scale step. components.css reads these, never the scale, so one job can be retuned without moving the others that share its step. Named by job, not h1–h6: a sheet's h2 and a page's h2 are different jobs. Weight and line height stay one per family (headings --weight-announce + --lh-tight, reading text --weight-read + --lh-body, meta --lh-snug); a role gets its own the day it needs to differ. */ --type-title: var(--text-lg); /* a screen's title, phone */ --type-title-wide: var(--text-xl); /* the same title from 600px */ --type-sheet-title: var(--text-lg); /* a sheet's or a dialog's title */ --type-state: var(--text-lg); /* a state's heading: empty, sent, gate */ --type-section: var(--text-md); /* a section's heading, a table's title, an error summary */ --type-body: var(--text-base); /* reading text, controls, table cells */ --type-meta: var(--text-sm); /* hints, captions, counts, chips, table heads */ --type-code: var(--text-lg); /* a sign-in code on its card */ --type-code-line: var(--text-md); /* the card's account line; the big code field */ --type-figure: var(--text-lg); /* a figure's value */ --type-key: var(--text-md); /* a keypad key's glyph */ --type-email-title: var(--text-lg); /* an email's heading */ --math-sub: var(--text-md); /* a smaller math line (.mfit--sub) */ --math-field: var(--math); /* math typed in an answer cell; fractions are display style at this size (P19) */ --weight-read: 400; --weight-ui: 500; --weight-announce: 600; --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.55; --track-caps: 0.08em; --track-ui: 0.02em; --track-head: -0.01em; --measure: 62ch; /* --- Space: 4px base ------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --gutter: var(--space-5); /* 24px side gutter on phone */ /* --- Shape ----------------------------------------------------------- */ --radius-sm: 8px; /* controls, chips */ --radius-md: 14px; /* primary button, sheets */ --radius-pill: 999px; --hairline: 1px; --edge: 3px; /* the accent button's pressable bottom edge */ /* --- Targets & chrome ------------------------------------------------ */ --tap: 48px; /* comfortable; 44px is the hard floor */ --progress-h: 4px; /* the thin top progress bar */ --dock-pad: var(--space-4); /* --- Motion: explains state, never decorates ------------------------- */ --dur-enter: 220ms; --dur-exit: 150ms; --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1); /* --- Reading comfort (student-controlled) ---------------------------- */ --reading-scale: 1; } /* Reading comfort (P31), owned here so components follow it (Tess, cycle 4 fix): the student's saved text size and dyslexia-friendly font set an attribute on , and these overrides are the only place that reacts to it. */ html[data-text-size="large"] { --reading-scale: 1.125; } html[data-text-size="larger"] { --reading-scale: 1.25; } html[data-dyslexia="on"] { --font-ui: var(--font-dyslexic); --lh-body: 1.75; } @media (prefers-reduced-motion: reduce) { :root { --dur-enter: 1ms; --dur-exit: 1ms; } }