/* theme.css — AssessmentHub shared design tokens ("Calm Academic", livened up per user tuning — this file should live at src/styles/theme.css; all pages link it from there. */ /* Used by the symbol palette's super/subscript buttons (x², x₂, and the individual pre-made ⁰¹²³.../₀₁₂₃... buttons). A plain / tag's default vertical-align:super/sub does NOT work inside a flex container (button labels use display:flex; align-items:center to center their content) — flexbox ignores vertical-align on its items entirely, which is why an earlier attempt at this rendered both identically flat. position:relative + top DOES still work on a flex item, so that's used here instead. */ .script-sup { font-size: 0.7em; position: relative; top: -0.5em; } .script-sub { font-size: 0.7em; position: relative; top: 0.4em; } :root { /* Primary accent — muted slate blue, used for buttons, links, focus states */ --primary: #6c8ebd; --primary-dark: #4a6b9c; --primary-light: #eff6ff; /* Semantic colours — softened, not alarm-toned */ --success: #659683; --success-bg: #EAF4EE; --success-border: #86b2a1; --warning: #D09345; --warning-bg: #FBF3E4; --warning-border: #E3B66A; --danger: #CC6A58; --danger-bg: #FBEEEC; --danger-border: #D47F70; /* Neutrals */ --bg: #F4F6FA; --card-bg: #FFFFFF; --text: #2F3439; --subtext: #707780; --border: #E0DED8; /* Shared shape/shadow tokens */ --radius: 14px; --radius-sm: 8px; --card-shadow: 0 6px 20px rgba(30, 30, 30, 0.05); /* Mode accents — Test and Practice share the same design system but keep a distinct top-of-card colour so students can tell at a glance which mode they're in (this existed before as hardcoded teal vs amber; now it's two tokens within the same palette family instead of two competing colour schemes). */ --test-accent: #7A9BC8; /* same as --primary */ --test-accent-dark: #587BB0; --practice-accent: #6FA89C; /* muted teal-green, distinct from primary blue */ --practice-accent-dark: #55897E; --practice-accent-light: #EAF4F1; } /* Selected-answer highlight for MCQ/True-False — CSS-only via :has(), supported in all current major browsers. Falls back to no highlight (not broken, just less visually clear) on very old browsers. */ .mcq-option:has(input:checked) { background: var(--primary-light); border-color: var(--primary); } /* MathQuill field container (math_input short-answer questions, see QuestionCard.js/shared-ui.js's initMathFields) — matches the plain input/textarea border+radius+focus convention every page already defines for itself, since MathQuill mounts into a
, not a real , so it inherits none of those per-page rules automatically. :focus-within, not :focus — the actual focus target is MathQuill's own internal hidden