/* ═══════════════════════════════════════════════════════════════════ variables.css — Shared Design Tokens v3.0 ─────────────────────────────────────────────────────────────────── Load order: variables.css → shared.css → core-ui.css → js-bridge.css → [page].css CONTRACT — read before editing: ┌─────────────────────────────────────────────────────────────────┐ │ LAYER 1 — PRIMITIVES (──400, ──500 etc. suffix names) │ │ Raw colour stops. Never used directly in components. │ │ Only semantic aliases (Layer 2) consume these. │ │ │ │ LAYER 2 — SEMANTIC ALIASES (──gold, ──navy, ──green …) │ │ Defined once here for the default/auth context. │ │ Overridden per page context in that page's body {} block │ │ (see shared.css → marketing context, │ │ master.css → exam-engine context, │ │ result.css → result-page context). │ │ │ │ RULES: │ │ • No component CSS may redefine a primitive. │ │ • No component CSS may add a new context alias; only page │ │ stylesheets may do that. │ │ • If a new shade is needed, add a primitive stop here first, │ │ then alias it in the relevant context. │ └─────────────────────────────────────────────────────────────────┘ ═══════════════════════════════════════════════════════════════════ */ :root { /* ════════════════════════════════════════════════════════════════ LAYER 1 — PRIMITIVE COLOUR RAMPS Never use these directly in component CSS. ════════════════════════════════════════════════════════════════ */ /* ── Gold ramp ────────────────────────────────────────────────── 400 muted warm amber — auth/login on white backgrounds (WCAG AA) 500 standard — marketing pages, navbar, on navy bg 600 strong — exam engine dark header 700 vivid — result hero & score pills on dark cards */ --gold-400: #b7791f; --gold-500: #c9922a; --gold-600: #c78100; --gold-700: #f39c12; /* Lighter tones used for text on dark backgrounds */ --gold-light-400: #c9921a; /* eyebrow text, taglines (auth) */ --gold-light-500: #e8b84b; /* headlines, logo tagline (marketing) */ --gold-pale: #fdf3e0; /* very pale tint for backgrounds */ /* ── Navy ramp ────────────────────────────────────────────────── 050 near-white tint — option hover bg, passage bg, light fills 100 light tint — blue-light containers, label bg 600 mid blue — sidebar bg, avatar bg (was --navy-light in shared.css) 700 standard — auth/login primary (was --navy in variables.css) 800 exam engine — exam header, result page blue-dark 900 darkest — dashboard, content pages, hero, footer */ --navy-050: #e8f0fa; --navy-100: #d0dff5; --navy-600: #1e4a73; --navy-700: #1a4a76; --navy-800: #153d66; --navy-900: #0d2137; /* Mid-dark step used for hover states and section backgrounds */ --navy-hover: #163352; /* ── Green ramp ───────────────────────────────────────────────── 400 dark theme & dashboard 500 result page, auth/login (WCAG AA on white) 600 marketing / shared pages */ --green-400: #27ae60; --green-500: #1e8c45; --green-600: #1a7a3e; --green-light: #d4edda; /* light bg for correct states */ --green-pale: #f0fdf4; /* very pale — success alert bg */ /* ── Red ramp ─────────────────────────────────────────────────── 500 shared / auth (WCAG AA on white) 600 exam engine (darker, more accessible on light bg) */ --red-500: #c0392b; --red-600: #a52a1f; --red-light: #fdecea; /* light bg for incorrect / error states */ /* ── Orange ───────────────────────────────────────────────────── */ --orange-500: #e67e22; --orange-light: #fff7ed; /* ── Teal (dashboard accent) ──────────────────────────────────── */ --teal-500: #0d9488; /* ════════════════════════════════════════════════════════════════ LAYER 2 — SEMANTIC ALIASES (default / auth-page context) These are the tokens all component CSS uses via var(). Page-level body {} blocks in other stylesheets override these for their specific context without touching this file. ════════════════════════════════════════════════════════════════ */ /* ── Context: auth / login pages (default — variables.css wins) ─ */ --gold: var(--gold-400); --gold-light: var(--gold-light-400); --navy: var(--navy-700); --navy-mid: var(--navy-hover); --navy-light: var(--navy-050); /* ALWAYS means the near-white tint */ --navy-dark: var(--navy-900); /* alias kept for backward compat */ --green: var(--green-500); --red: var(--red-500); --orange: var(--orange-500); /* ── Typography ───────────────────────────────────────────────── variables.css intentionally leaves font-display & font-body at Inter/system-ui as a safe fallback. shared.css overrides these to the actual Playfair/DM Sans stack for marketing & app pages. Login pages (which load variables.css before shared.css) get DM Sans via shared.css anyway because shared.css loads second. */ --font-display: 'Playfair', Georgia, serif; --font-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif; --font-alt: 'Plus Jakarta Sans', 'DM Sans', sans-serif; --font-ui: 'DM Sans', sans-serif; --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; --font-manrope: 'Plus Jakarta Sans', 'DM Sans', sans-serif; /* Numeric-only tokens (not font-family strings) */ --font-bold: 700; --font-semi-bold: 600; /* ── Neutral scale ────────────────────────────────────────────── Single unified grey ramp. shared.css no longer redefines these. grey-050 added to fix dashboard.css's undeclared --grey-50. */ --white: #ffffff; --color-white: #ffffff; /* alias used by core-ui.css */ --cream: #fafaf7; /* default body bg (marketing/public) */ --cream-auth: #f5f3ef; /* off-white — mobile login page bg */ --grey-050: #fafafa; --grey-50: var(--grey-050); --grey-100: #f4f4f5; --grey-200: #e4e4e7; --grey-300: #d4d4d8; --grey-400: #a1a1aa; --grey-500: #71717a; --grey-600: #52525b; --grey-700: #3f3f46; --grey-800: #27272a; --grey-900: #18181b; /* ── Border radius ────────────────────────────────────────────── */ --radius: 8px; /* generic alias used across shared component CSS */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 50%; /* ── Shadows ──────────────────────────────────────────────────── All use the navy-tinted rgba for brand coherence. Previously variables.css and shared.css had different alpha values — unified here. master.css dark-mode shadows are kept in master.css because they need black (not navy-tinted) alphas. */ --shadow-sm: 0 2px 8px rgba(13, 33, 55, 0.08); --shadow-md: 0 6px 24px rgba(13, 33, 55, 0.12); --shadow-lg: 0 16px 48px rgba(13, 33, 55, 0.18); /* ── Transitions ─────────────────────────────────────────────── */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-medium: 0.3s ease; /* added — used in dashboard.css */ /* ── Z-index ─────────────────────────────────────────────────── */ --z-dropdown: 100; --z-sticky: 200; --z-modal: 500; --z-toast: 9999; /* ── Spacing (8-point scale) ─────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ── Dashboard semantic accents ──────────────────────────────── */ --teal: var(--teal-500); --teal-dim: rgba(13, 148, 136, 0.10); --gold-dim: rgba(201, 146, 42, 0.10); --green-dim: rgba(26, 122, 69, 0.10); --red-dim: rgba(192, 57, 43, 0.10); --amber: #e8a820; /* dashboard bar fills (distinct from --gold) */ /* ── Dashboard layout ────────────────────────────────────────── */ --sidebar-w: 240px; /* ── Slate scale (dashboard dark sidebar) ──────────────────────── Previously used in dashboard.css without declaration — fixed. */ --slate-900: #0f172a; --slate-800: #1e293b; --slate-600: #475569; --slate-400: #94a3b8; --slate-300: #cbd5e1; /* Teal glow used in dashboard hover states */ --teal-glow: rgba(13, 148, 136, 0.25); /* ════════════════════════════════════════════════════════════════ CORE-UI COMPONENT TOKENS Consumed by core-ui.css (modal, toast, lightbox). ════════════════════════════════════════════════════════════════ */ --card-bg: #ffffff; --text-color: #1b1b23; --muted-color:#767586; --hover-bg: #f4f4f8; --cui-brand: #4648d4; --cui-brand-hover: #3739b8; --cui-brand-focus: #4648d4; --cui-dark-blue: #1e2f5e; --cui-border-muted: #c7c4d7; --cui-toast-success: #28a745; --cui-toast-error: #dc3545; --cui-toast-warning: #d97706; /* ════════════════════════════════════════════════════════════════ PASSWORD STRENGTH METER Written by login.js via element.style.setProperty(). Consumed by js-bridge.css .strength-bar { background: var(--bar-fill) } ════════════════════════════════════════════════════════════════ */ --strength-weak: #ef4444; --strength-fair: #f59e0b; --strength-good: #3b82f6; --strength-strong: #16a34a; --strength-label-color: var(--grey-500); /* ════════════════════════════════════════════════════════════════ CSSOM BRIDGE DEFAULTS Fallback values for every custom property that JS writes via element.style.setProperty(). Correct rendering before JS fires. ════════════════════════════════════════════════════════════════ */ /* result.js — section cards & progress bars */ --sec-color: var(--navy); --fill-color: var(--navy); --js-width: 0%; /* result.js — topic panel bar & badge */ --bar-color: var(--grey-200); --badge-color: var(--navy); /* result.js — bench empty-state cell padding */ --bench-empty-td-padding: 0; /* login.js — password strength bar fill */ --bar-fill: var(--grey-200); /* ── js-dynamic-style generic holder ────────────────────────── */ --js-background: transparent; --js-color: inherit; --js-opacity: 1; --js-height: auto; --js-marginLeft: 0; --js-top: auto; --js-left: auto; } /* ───────────────────────────────────────────────────────────────── END OF FILE — do not add component rules here. Component CSS belongs in shared.css or a page-specific sheet. ───────────────────────────────────────────────────────────────── */