/* * tokens.css — Single source of truth for all CSS custom properties in StoryLearn. * * TWO-ZONE SYSTEM * ─────────────── * Zone 1 — Shell (login, library, admin): CounterpointHQ brand aesthetic. * Controlled by data-theme attribute on : * :root[data-theme="light"] → cream/ember/gold palette (default) * :root[data-theme="dark"] → dark charcoal palette * Theme toggle persists in localStorage and respects prefers-color-scheme. * * Zone 2 — Sandbox (story pages): Terminal dark theme. Always dark, never toggled. * Tokens prefixed --sandbox-* are defined at :root base level and never change. * * NEVER hardcode color or spacing values in component CSS. Always use var(--token). */ /* ── Sandbox tokens (story zone — always dark, no toggle) ─────────────────── */ :root { /* Sandbox backgrounds */ --sandbox-bg-primary: #1a1d23; --sandbox-bg-secondary: #22252b; --sandbox-bg-tertiary: #2a2d35; /* Sandbox text */ --sandbox-text-primary: #e8eaed; --sandbox-text-secondary: #9aa0a6; --sandbox-text-tertiary: #5f6368; /* Sandbox accents */ --sandbox-accent-blue: #4a9eff; --sandbox-accent-blue-hover: #5db0ff; --sandbox-accent-green: #34d399; --sandbox-accent-red: #ef4444; --sandbox-accent-yellow: #fbbf24; --sandbox-accent-purple: #a78bfa; /* Sandbox typography */ --sandbox-font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --sandbox-font-mono: "SF Mono", "Consolas", "Liberation Mono", "Menlo", "Courier New", monospace; /* ── Shared spacing scale (used by both zones) ──────────────────────── */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 1rem; /* 16px */ --spacing-lg: 1.5rem; /* 24px */ --spacing-xl: 2rem; /* 32px */ --spacing-2xl: 3rem; /* 48px */ /* ── Shared type scale ──────────────────────────────────────────────── */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.5rem; /* 24px */ --font-size-2xl: 2rem; /* 32px */ --line-height-tight: 1.25; --line-height-base: 1.6; --line-height-relaxed: 1.75; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ── Shared layout ──────────────────────────────────────────────────── */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; /* ── Shared transitions ─────────────────────────────────────────────── */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.3s ease; /* ── Shared border radius ───────────────────────────────────────────── */ --radius-sm: 4px; --radius-base: 6px; --radius-lg: 8px; --radius-xl: 12px; } /* ── Shell zone — Light theme (CounterpointHQ brand, default) ─────────────── */ :root[data-theme="light"] { /* Backgrounds */ --shell-bg: #FFFAF5; /* cream */ --shell-bg-warm: #FFF3E8; /* warm-10 */ --shell-bg-card: #ffffff; --shell-border: #F9D9B8; /* warm-30 */ /* Text */ --shell-text-primary: #1E1A17; /* charcoal */ --shell-text-secondary: #5A4A3A; /* mid */ --shell-text-muted: #9B8775; /* light */ /* Brand accents */ --shell-ember: #C44B1B; --shell-ember-dark: #A83A10; --shell-amber: #E07A2F; --shell-gold: #F0A940; --shell-gold-hover: #F5BC50; /* Nav */ --shell-nav-bg: #FFFAF5; --shell-nav-border: #F9D9B8; /* Footer */ --shell-footer-bg: #1E1A17; --shell-footer-text: rgba(255, 255, 255, 0.55); --shell-footer-meta: rgba(255, 255, 255, 0.4); /* Gradients */ --shell-hero-gradient: linear-gradient(135deg, #2A1508 0%, #5C2010 35%, #C44B1B 70%, #E07A2F 100%); --shell-cta-gradient: linear-gradient(135deg, #2A1508, #5C2010, #C44B1B); /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow-card-hover: 0 12px 40px rgba(196, 75, 27, 0.1); /* Shell typography */ --shell-font-serif: Georgia, serif; --shell-font-sans: Arial, sans-serif; } /* ── Shell zone — Dark theme ──────────────────────────────────────────────── */ :root[data-theme="dark"] { /* Backgrounds */ --shell-bg: #1E1A17; /* charcoal */ --shell-bg-warm: #2A221C; --shell-bg-card: #2E261F; --shell-border: #4A3828; /* Text */ --shell-text-primary: #F5EDE4; --shell-text-secondary: #C4A98A; --shell-text-muted: #8A7060; /* Brand accents — same in both themes */ --shell-ember: #C44B1B; --shell-ember-dark: #A83A10; --shell-amber: #E07A2F; --shell-gold: #F0A940; --shell-gold-hover: #F5BC50; /* Nav */ --shell-nav-bg: #1E1A17; --shell-nav-border: #4A3828; /* Footer */ --shell-footer-bg: #0F0D0B; --shell-footer-text: rgba(255, 255, 255, 0.45); --shell-footer-meta: rgba(255, 255, 255, 0.3); /* Gradients — unchanged from light (already dark) */ --shell-hero-gradient: linear-gradient(135deg, #2A1508 0%, #5C2010 35%, #C44B1B 70%, #E07A2F 100%); --shell-cta-gradient: linear-gradient(135deg, #2A1508, #5C2010, #C44B1B); /* Shadows — more prominent on dark backgrounds */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2); --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3); --shadow-card-hover: 0 12px 40px rgba(196, 75, 27, 0.2); /* Shell typography */ --shell-font-serif: Georgia, serif; --shell-font-sans: Arial, sans-serif; } /* ── Reduced motion ───────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }