/* ============================================================ VARIABLES.CSS — Design tokens ──────────────────────────────────────────────────────────── Light-first, teacher-trustworthy. Teal primary kept from the original palette; neutrals re-grounded on a slate scale with warmer paper surfaces; spacing/elevation/radius scales tightened to support the institutional aesthetic of the new pages (home, build paper, profile, question bank, select plan). ALL prior token names are preserved — adding new tokens is additive; renaming is not. Pages that referenced --clr-bg-page, --clr-primary, --shadow, --radius, etc. continue to render unchanged. ============================================================ */ :root { /* ── Brand ─────────────────────────────────────────────── */ /* Teal — flagship colour, used for buttons, links, focus rings, active nav state. Slightly darker `--clr-primary-dark` for hover (matches WCAG AA on white at 4.94:1 vs 4.51:1). */ --clr-primary: #0D9488; --clr-primary-dark: #0F766E; --clr-primary-darker: #115E59; --clr-primary-light: rgba(13, 148, 136, 0.08); --clr-primary-subtle: #F0FDFA; --clr-primary-tint: #CCFBF1; /* section badges, soft chips */ /* Teal-300 accent — used as light-on-dark accent text (e.g. on the pro-tip gradient card, dark-mode chips/pills, and the navbar's active link in dark theme). Lifted out of multiple stylesheets so they can share one source of truth. */ --clr-primary-accent: #5EEAD4; /* Warm amber — the only accent. Used sparingly for "free plan", "featured" ribbons, the question-bank's recommendation chips. */ --clr-accent: #F59E0B; --clr-accent-dark: #D97706; --clr-accent-subtle: #FFFBEB; /* NEW */ /* ── Semantic ──────────────────────────────────────────── */ --clr-success: #16a34a; --clr-success-bg: #f0fdf4; --clr-success-tint: #DCFCE7; /* NEW */ --clr-danger: #dc2626; --clr-danger-bg: #fef2f2; --clr-danger-tint: #FEE2E2; /* NEW */ --clr-warning: #d97706; --clr-warning-bg: #fffbeb; --clr-info: #0D9488; --clr-info-bg: #F0FDFA; /* ── Neutrals (slate ramp) ─────────────────────────────── */ /* Full ramp exposed so cards/components can pull intermediate stops without redefining colours locally. */ --clr-slate-50: #F8FAFC; --clr-slate-100: #F1F5F9; --clr-slate-200: #E2E8F0; --clr-slate-300: #CBD5E1; --clr-slate-400: #94A3B8; --clr-slate-500: #64748B; --clr-slate-600: #475569; --clr-slate-700: #334155; --clr-slate-800: #1E293B; --clr-slate-900: #0F172A; --clr-secondary: var(--clr-slate-500); --clr-secondary-hover: var(--clr-slate-600); /* ── Extended palette (stat icons, decorative chips) ────── Numbered stops for amber, violet, rose used by decorative dashboard accents (stat-card icons, top-plan badge gradient). Kept here so per-page stylesheets don't have hex literals. */ --clr-amber-100: #FEF3C7; --clr-amber-200: #FDE68A; --clr-amber-500: #F59E0B; --clr-amber-600: #D97706; --clr-amber-700: #B45309; --clr-violet-50: #F5F3FF; --clr-violet-100: #EDE9FE; --clr-violet-700: #6D28D9; --clr-rose-50: #FFF1F2; --clr-rose-200: #FECACA; --clr-rose-300: #FDA4AF; --clr-rose-700: #BE123C; /* Cyan + indigo were inline-hex everywhere in form.css. Lifted out so the question-type accent palette has a real home. */ --clr-cyan-50: #ECFEFF; --clr-cyan-200: #67E8F9; --clr-cyan-700: #0E7490; --clr-indigo-50: #EEF2FF; --clr-indigo-200: #A5B4FC; --clr-indigo-700: #4338CA; /* ── Question-type accent palette ────────────────────────── Build-paper Quick-add buttons + question-card chrome colour-code each question type. Promoted to semantic tokens so dark-mode and white-label theming can rebind in one place — no more inline hex in form.css. */ --clr-qtype-mcq: var(--clr-primary); --clr-qtype-mcq-tint: var(--clr-primary-tint); --clr-qtype-short: var(--clr-amber-700); --clr-qtype-short-tint: var(--clr-amber-100); --clr-qtype-long: var(--clr-violet-700); --clr-qtype-long-tint: var(--clr-violet-50); --clr-qtype-ar: var(--clr-rose-700); --clr-qtype-ar-tint: var(--clr-rose-50); --clr-qtype-stmt: var(--clr-cyan-700); --clr-qtype-stmt-tint: var(--clr-cyan-50); --clr-qtype-story: var(--clr-indigo-700); --clr-qtype-story-tint: var(--clr-indigo-50); /* ── Text ──────────────────────────────────────────────── */ --clr-text-dark: var(--clr-slate-800); --clr-text-body: var(--clr-slate-700); --clr-text-muted: var(--clr-slate-500); --clr-text-faint: var(--clr-slate-400); /* NEW — meta info */ --clr-text-light: #ffffff; --clr-text-placeholder: var(--clr-slate-400); /* ── Backgrounds ───────────────────────────────────────── */ --clr-bg-page: var(--clr-slate-100); --clr-bg-card: #ffffff; --clr-bg-subtle: var(--clr-slate-50); --clr-bg-input: #ffffff; --clr-bg-hover: var(--clr-slate-100); --clr-bg-dark: var(--clr-slate-900); --clr-bg-dark-card: var(--clr-slate-800); /* Warm "paper" surface — preview/finalised paper view, demo cards on the landing page. Reads like a printed sheet, not a screen. Slightly off-white so adjacent pure-white cards still visibly stack on top. */ --clr-bg-paper: #FAFAF7; /* ── Paper-preview accent palette ────────────────────────── Warm secondary palette used by Qbuild/preview.css for meta strip, instructions block, case-study passages / tables / image placeholders. Lifted out of the stylesheet so dark-mode / white-label themes can rebind in one place. */ --clr-paper-ink: #1A1A1A; --clr-paper-canvas-bg: #E8ECEF; --clr-paper-canvas-print: #D6DADD; --clr-paper-meta-bg: #F0EEE6; --clr-paper-meta-border: #E8E3D2; --clr-paper-instructions-bg: #FAF8ED; --clr-paper-instructions-bd: #D6D2C0; --clr-paper-passage-bg: #F4F1E6; --clr-paper-passage-border: #B8A87D; --clr-paper-passage-ph: #8A7D52; --clr-paper-table-head: #EBE7D8; /* ── Borders ───────────────────────────────────────────── */ --clr-border: var(--clr-slate-200); --clr-border-light: var(--clr-slate-100); --clr-border-strong: var(--clr-slate-300); /* NEW */ --clr-border-dark: var(--clr-slate-700); --clr-border-subtle: rgba(15, 23, 42, 0.06); /* ── Glass / surface (kept for dark mode) ──────────────── */ --clr-box-light: rgba(255, 255, 255, 0.85); --clr-box-dark: rgba(15, 23, 42, 0.92); /* ── Gradients ─────────────────────────────────────────── */ /* Subdued; brand gradient is for hero accents and the demo card, never for full backgrounds (institutional tone). */ --gradient-start: var(--clr-primary); --gradient-end: #2DD4BF; --gradient-main: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); --gradient-page: linear-gradient(160deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%); --gradient-paper: linear-gradient(180deg, #FFFFFF 0%, #FAFAF7 100%); /* NEW */ /* ── Plan tiers ────────────────────────────────────────── */ --clr-basic: var(--clr-slate-500); --clr-standard: #16a34a; --clr-premium: #d97706; /* ── Spacing scale (NEW) ───────────────────────────────── */ /* 4px base. Use these instead of arbitrary rem values inside new components — keeps rhythm consistent across pages. */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* ── Shape ─────────────────────────────────────────────── */ --radius-xs: 0.25rem; /* 4px — chips, tiny pills (NEW) */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.5rem; /* 8px — between sm + default; heavy use in polish layers */ --radius: 0.625rem; /* 10px — default for inputs/buttons */ --radius-lg: 0.875rem; /* 14px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px — feature cards (NEW) */ --radius-pill: 9999px; /* ── Elevation ─────────────────────────────────────────── */ /* Layered shadows — y1 + y2 — read as a real ambient shadow instead of the flat blur of a single offset. */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.03); --shadow: 0 4px 12px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.04); --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04); /* NEW */ --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05); --shadow-xl: 0 24px 56px rgba(15, 23, 42, 0.14), 0 8px 16px rgba(15, 23, 42, 0.06); /* NEW — modals */ /* Focus ring — translucent so it shows on any background colour without forcing a particular surface assumption. */ --shadow-glow: 0 0 0 3px var(--clr-primary-light); --shadow-focus: 0 0 0 3px rgba(13, 148, 136, 0.25); /* NEW — sharper for keyboard */ /* Inner shadow used by paper preview to suggest depth on a sheet. */ --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8); /* NEW */ /* ── Motion ────────────────────────────────────────────── */ --transition-fast: 0.15s ease; --transition: 0.25s ease; --transition-slow: 0.4s ease; /* Tween for confident UI motion — used for sticky toolbars, drawer slide-in, modal pop. */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* NEW */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* NEW */ /* ── Typography ────────────────────────────────────────── */ /* Inter for UI; Fraunces for editorial display (page titles, section headers in select-plan / landing). System fallbacks listed defensively in case the Google Fonts request fails. */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-editorial: 'Newsreader', Georgia, 'Times New Roman', serif; /* italic em accents on home dashboard */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Type scale — extended on both ends to support the editorial headlines on landing/select-plan and the dense table rows in home/question-bank. */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 1.875rem; /* 30 */ --text-4xl: 2.25rem; /* 36 */ --text-5xl: 3rem; /* 48 — display */ --text-6xl: 3.75rem; /* 60 — hero */ /* ── Compact-density type scale (NEW 2026-05) ────────── Sits BETWEEN the standard tokens above. The polish stylesheets (home/profile/select-plan/question-bank) use these to render at ~80% of the standard scale so dashboards feel dense without a separate "density" toggle. Bumping any size globally only needs a tweak HERE — the polish files all reference these vars. */ --text-c-2xs: 0.65rem; /* 10.4 — tab counters, micro chips */ --text-c-xs: 0.7rem; /* 11.2 — stat labels, foot timestamps */ --text-c-sm: 0.78rem; /* 12.5 — small body, dropdown text */ --text-c-md: 0.85rem; /* 13.6 — most body copy on dashboards */ --text-c-lg: 0.95rem; /* 15.2 — card titles (h3) */ --text-c-xl: 1.15rem; /* 18.4 — big numbers, currency */ --text-c-2xl: 1.5rem; /* 24 — section headings (h2) */ /* Line-height tokens — pages can use these instead of arbitrary 1.4 / 1.6 numbers. Tight for headings, comfortable for body. */ --leading-tight: 1.15; /* NEW */ --leading-snug: 1.3; /* NEW */ --leading-normal: 1.5; /* NEW */ --leading-relaxed: 1.65; /* NEW */ /* Tracking — Fraunces wants a touch tighter; Inter is fine at 0. */ --tracking-tight: -0.02em; /* NEW */ --tracking-snug: -0.01em; /* NEW */ --tracking-normal: 0; /* NEW */ --tracking-wide: 0.05em; /* NEW — eyebrow labels */ /* ── Layout (NEW) ──────────────────────────────────────── */ /* Page width caps. Most content sits inside `--width-content`; the landing hero / pricing cards extend to `--width-wide`. */ --width-narrow: 640px; --width-content: 1080px; --width-wide: 1240px; /* Sticky-region offsets used by the build-paper toolbar and question-bank filter bar so they don't fight each other. */ --offset-navbar: 64px; --offset-toolbar: 56px; }