/* ========================================================================== XOTUTOR — shared theme tokens Stage 1: token foundation. Single source of truth for the colour layer across every dark-themed page. Tokens are named by ROLE, not by appearance, so Stage 2 can add a light value set without renaming a single reference. Dark is the base palette and lives on :root, so every page renders correctly with or without a theme class on . `.dark` on is the explicit dark selector and matches `tailwind.config = { darkMode: 'class' }` in index.html. `.light` is the Stage 2 hook and is deliberately empty for now — Stage 1 changes no pixels. Contrast ratios below are WCAG 2.1 against --surface (#1c2a48) unless stated otherwise. AA thresholds: 4.5:1 normal text, 3.0:1 large text. ========================================================================== */ :root { /* ── Surfaces ────────────────────────────────────────────────────────── */ --surface: #1c2a48; /* page background (app pages) */ --surface-raised: #243349; /* cards standing above the page */ --surface-sunken: #1e293b; /* lesson sections, inset panels */ --surface-control: #334155; /* form inputs, selects, textareas */ --surface-control-focus: #3f4b5f; /* same, focused */ /* ── Text ────────────────────────────────────────────────────────────── */ --text-primary: #f1f5f9; /* 13.00:1 PASS */ --text-secondary: #cbd5e1; /* 9.59:1 PASS */ --text-muted: #94a3b8; /* 5.56:1 PASS (4.98:1 on raised) */ --text-on-accent: #ffffff; /* text sitting on an accent fill */ /* --text-muted is the only muted grey that clears AA on every surface in this set. It replaces #64748b (2.99:1) and #475569 (1.88:1), both of which failed normal AND large text on every dark surface. */ /* ── Accent (purple), pale → deepest ─────────────────────────────────── */ --accent-pale: #c4b5fd; /* 7.72:1 PASS */ --accent: #a78bfa; /* 5.23:1 PASS — accent text and links */ --accent-strong: #8b5cf6; /* 3.36:1 large text / non-text only */ --accent-deep: #7c3aed; /* 2.50:1 fills only, never text */ --accent-deepest: #6b21a8; /* fills only; also PWA manifest colour */ /* ── Borders ─────────────────────────────────────────────────────────── */ --border: #334155; /* card and divider borders */ --border-strong: #475569; /* form inputs, ghost-button outlines */ --border-accent: rgba(139, 92, 246, 0.25); --border-accent-strong: rgba(139, 92, 246, 0.35); --border-gold: rgba(251, 191, 36, 0.30); /* ── Status ──────────────────────────────────────────────────────────── */ --gold: #fbbf24; /* 8.53:1 PASS */ --gold-deep: #f59e0b; /* 6.63:1 PASS */ --success: #10b981; /* 5.62:1 PASS */ --danger: #ef4444; /* 3.79:1 large text / non-text only */ } /* ========================================================================== Surface families Three page groups ship a different surface trio than the app does. That divergence is real in production today, so Stage 1 preserves it exactly — expressed in the SAME vocabulary rather than in a competing one. Collapsing these onto --surface is a design decision, not a foundation one: it would change how those pages look. Stage 2/3 can delete any block below in a single move once that call is made. ========================================================================== */ /* Marketing / SEO landing pages: ai-language-tutor, ai-tutor-app, ai-tutor-gcse, for-schools, testimonials, xoai-cloud-with-sports. */ :root.surface-deep { --surface: #0f172a; --surface-raised: #1e293b; --surface-sunken: #1e293b; } /* Internal marketing dashboard: xo-marketing-dashboard. */ :root.surface-dashboard { --surface: #080c14; --surface-raised: #141d2e; --surface-sunken: #0f1623; --border: #1e2d47; } /* Feedback page: brand purple page background. */ :root.surface-brand { --surface: #6b21a8; --surface-raised: #6b21a8; --surface-sunken: #6b21a8; } /* ========================================================================== Stage 2 — light theme. Populated when the light value set lands. Switch by swapping `.dark` for `.light` on . Intentionally empty in Stage 1: the toggle is wired, the values are not yet chosen. ========================================================================== */ :root.light { /* Stage 2 populates the same token names with light values. */ }