/* ============================================================ BOOST LSAT — Design Tokens "Warm Scholar" Design System Single source of truth for all visual tokens. Imported by every UI surface in the ecosystem. ============================================================ */ /* ── Fonts ── */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap'); :root { /* ────────────────────────────────────────────────────────── Typography ────────────────────────────────────────────────────────── */ --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace; /* Scale (major third — 1.25) */ --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem); /* ~12px */ --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem); /* ~14px */ --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1rem); /* ~16px */ --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.25rem); /* ~20px */ --text-xl: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); /* ~28px */ --text-2xl: clamp(1.8rem, 1.5rem + 1.2vw, 2.5rem); /* ~40px */ --text-3xl: clamp(2.2rem, 1.8rem + 1.6vw, 3.25rem); /* ~52px */ /* Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold:800; /* Line heights */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed:1.625; --leading-loose: 1.8; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.05em; --tracking-widest: 0.08em; /* ────────────────────────────────────────────────────────── Color Palette — OKLCH Light mode is default. Dark mode via [data-theme="dark"]. ────────────────────────────────────────────────────────── */ /* Primary — Deep Teal (scholarly, focused) */ --color-primary: oklch(55% 0.12 175); --color-primary-hover: oklch(60% 0.13 175); --color-primary-light: oklch(85% 0.06 175); --color-primary-dark: oklch(35% 0.10 175); --color-primary-muted: oklch(55% 0.12 175 / 0.15); --color-on-primary: oklch(100% 0 0); /* white — text on primary/accent fills */ /* CTA — Warm Amber (action, warmth) */ --color-cta: oklch(70% 0.14 75); --color-cta-hover: oklch(75% 0.16 75); --color-cta-text: oklch(15% 0.02 75); --color-cta-muted: oklch(70% 0.14 75 / 0.15); /* Semantic */ --color-success: oklch(65% 0.15 145); --color-success-muted: oklch(65% 0.15 145 / 0.15); --color-warning: oklch(75% 0.14 80); --color-warning-muted: oklch(75% 0.14 80 / 0.15); --color-error: oklch(60% 0.18 25); --color-error-muted: oklch(60% 0.18 25 / 0.15); /* Correct answer glow — used in classroom tally & choice highlighting */ --correct-glow: oklch(65% 0.15 145 / 0.15); /* success green at 15% */ /* ── Transparency Variants (for UI state layers) ── */ /* Primary (teal) */ --color-primary-5: color-mix(in oklch, var(--color-primary) 5%, transparent); --color-primary-8: color-mix(in oklch, var(--color-primary) 8%, transparent); --color-primary-10: color-mix(in oklch, var(--color-primary) 10%, transparent); --color-primary-12: color-mix(in oklch, var(--color-primary) 12%, transparent); --color-primary-15: color-mix(in oklch, var(--color-primary) 15%, transparent); --color-primary-20: color-mix(in oklch, var(--color-primary) 20%, transparent); --color-primary-25: color-mix(in oklch, var(--color-primary) 25%, transparent); --color-primary-30: color-mix(in oklch, var(--color-primary) 30%, transparent); --color-primary-40: color-mix(in oklch, var(--color-primary) 40%, transparent); --color-primary-50: color-mix(in oklch, var(--color-primary) 50%, transparent); --color-primary-60: color-mix(in oklch, var(--color-primary) 60%, transparent); /* CTA (amber) */ --color-cta-10: color-mix(in oklch, var(--color-cta) 10%, transparent); --color-cta-12: color-mix(in oklch, var(--color-cta) 12%, transparent); --color-cta-15: color-mix(in oklch, var(--color-cta) 15%, transparent); --color-cta-18: color-mix(in oklch, var(--color-cta) 18%, transparent); --color-cta-20: color-mix(in oklch, var(--color-cta) 20%, transparent); --color-cta-22: color-mix(in oklch, var(--color-cta) 22%, transparent); --color-cta-25: color-mix(in oklch, var(--color-cta) 25%, transparent); --color-cta-30: color-mix(in oklch, var(--color-cta) 30%, transparent); --color-cta-40: color-mix(in oklch, var(--color-cta) 40%, transparent); --color-cta-50: color-mix(in oklch, var(--color-cta) 50%, transparent); --color-cta-55: color-mix(in oklch, var(--color-cta) 55%, transparent); --color-cta-60: color-mix(in oklch, var(--color-cta) 60%, transparent); /* Success (green) */ --color-success-8: color-mix(in oklch, var(--color-success) 8%, transparent); --color-success-10: color-mix(in oklch, var(--color-success) 10%, transparent); --color-success-12: color-mix(in oklch, var(--color-success) 12%, transparent); --color-success-15: color-mix(in oklch, var(--color-success) 15%, transparent); --color-success-18: color-mix(in oklch, var(--color-success) 18%, transparent); --color-success-20: color-mix(in oklch, var(--color-success) 20%, transparent); --color-success-25: color-mix(in oklch, var(--color-success) 25%, transparent); --color-success-30: color-mix(in oklch, var(--color-success) 30%, transparent); --color-success-40: color-mix(in oklch, var(--color-success) 40%, transparent); /* Error (red) */ --color-error-10: color-mix(in oklch, var(--color-error) 10%, transparent); --color-error-12: color-mix(in oklch, var(--color-error) 12%, transparent); --color-error-15: color-mix(in oklch, var(--color-error) 15%, transparent); --color-error-18: color-mix(in oklch, var(--color-error) 18%, transparent); --color-error-20: color-mix(in oklch, var(--color-error) 20%, transparent); --color-error-22: color-mix(in oklch, var(--color-error) 22%, transparent); --color-error-25: color-mix(in oklch, var(--color-error) 25%, transparent); --color-error-30: color-mix(in oklch, var(--color-error) 30%, transparent); --color-error-40: color-mix(in oklch, var(--color-error) 40%, transparent); /* Warning (yellow) */ --color-warning-8: color-mix(in oklch, var(--color-warning) 8%, transparent); --color-warning-10: color-mix(in oklch, var(--color-warning) 10%, transparent); --color-warning-12: color-mix(in oklch, var(--color-warning) 12%, transparent); --color-warning-30: color-mix(in oklch, var(--color-warning) 30%, transparent); --color-warning-40: color-mix(in oklch, var(--color-warning) 40%, transparent); --color-warning-50: color-mix(in oklch, var(--color-warning) 50%, transparent); /* ── Overlay / Scrim ── */ --overlay-light: oklch(12% 0.01 60 / 0.3); --overlay-medium: oklch(12% 0.01 60 / 0.5); --overlay-heavy: oklch(12% 0.01 60 / 0.65); /* ── Light Mode Surfaces (cream-tinted, hue 80 = warm yellow hint) ── */ --surface-0: oklch(97% 0.01 80); /* base background */ --surface-1: oklch(99% 0.005 80); /* raised surface / cards */ --surface-2: oklch(95% 0.01 80); /* subtle divisions */ --surface-3: oklch(100% 0 0); /* overlays */ /* ── Light Mode Text ── */ --text-1: oklch(15% 0.01 60); /* primary */ --text-2: oklch(35% 0.01 60); /* secondary */ --text-3: oklch(55% 0.01 60); /* muted */ /* ── Light Mode Borders ── */ --border-1: oklch(85% 0.005 60); --border-2: oklch(80% 0.008 60); --border-3: oklch(75% 0.01 60); /* ── Light Mode Shadows ── */ --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.06); --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.08); --shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.1); --shadow-xl: 0 16px 48px oklch(0% 0 0 / 0.12); /* Primary slightly adjusted for light backgrounds */ --color-primary: oklch(45% 0.14 175); --color-primary-hover: oklch(40% 0.15 175); /* CTA text: white on warm amber for contrast */ --color-cta-text: oklch(100% 0 0); /* Input borders: higher contrast than surface borders on cream backgrounds */ --border-input: oklch(70% 0.01 60); /* ────────────────────────────────────────────────────────── Spacing — 4pt grid ────────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ────────────────────────────────────────────────────────── Radii ────────────────────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ────────────────────────────────────────────────────────── Shadows — defined per theme above / below ────────────────────────────────────────────────────────── */ /* ────────────────────────────────────────────────────────── Motion — exponential easing ────────────────────────────────────────────────────────── */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-instant: 100ms; --duration-fast: 200ms; --duration-normal: 300ms; --duration-slow: 500ms; /* Shorthand transitions */ --transition-fast: var(--duration-fast) var(--ease-out-quart); --transition-normal: var(--duration-normal) var(--ease-out-quart); /* ────────────────────────────────────────────────────────── Z-Index Scale ────────────────────────────────────────────────────────── */ --z-dropdown: 10; --z-sticky: 20; --z-fixed: 30; --z-backdrop: 40; --z-modal: 50; --z-toast: 60; --z-tooltip: 70; } /* ============================================================ Dark Mode ============================================================ */ [data-theme="dark"] { /* Surfaces (warm-tinted, hue 60 = amber hint) */ --surface-0: oklch(15% 0.01 60); /* base background */ --surface-1: oklch(19% 0.01 60); /* raised surface */ --surface-2: oklch(23% 0.01 60); /* elevated (cards) */ --surface-3: oklch(27% 0.01 60); /* overlay / modals */ /* Text */ --text-1: oklch(93% 0.01 60); /* primary text */ --text-2: oklch(72% 0.01 60); /* secondary text */ --text-3: oklch(55% 0.01 60); /* muted / placeholder */ /* Borders */ --border-1: oklch(28% 0.008 60); --border-2: oklch(33% 0.01 60); --border-3: oklch(38% 0.012 60); /* Shadows — stronger in dark mode */ --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.15); --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.2); --shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.25); --shadow-xl: 0 16px 48px oklch(0% 0 0 / 0.3); /* Primary — brighter for dark backgrounds */ --color-primary: oklch(55% 0.12 175); --color-primary-hover: oklch(60% 0.13 175); /* CTA text: dark on warm amber */ --color-cta-text: oklch(15% 0.02 75); /* Input borders */ --border-input: oklch(33% 0.01 60); }