/* ========================================================================== VARIABLES.CSS — Design Token System ========================================================================== */ :root { /* ------------------------------------------------------------------------- 1. COLOUR PALETTE — Raw values. Do not use these directly in components. Use the semantic tokens in Section 2 instead. ------------------------------------------------------------------------- */ --palette-black: #0B0F14; --palette-surface: #131A22; --palette-surface-alt: #1A2332; --palette-border: #1E2A35; --palette-border-light: #2A3A4A; --palette-cyan: #00E5FF; --palette-cyan-dim: #00B8CC; --palette-cyan-muted: rgba(0, 229, 255, 0.12); --palette-cyan-glow: rgba(0, 229, 255, 0.25); --palette-purple: #8B5CF6; --palette-purple-dim: #7C3AED; --palette-purple-muted: rgba(139, 92, 246, 0.12); --palette-purple-glow: rgba(139, 92, 246, 0.25); --palette-white: #F5F7FA; --palette-white-muted: rgba(245, 247, 250, 0.7); --palette-white-faint: rgba(245, 247, 250, 0.4); --palette-slate-400: #8892A4; --palette-slate-600: #4A5568; /* Difficulty colours — used on topic cards */ --palette-green: #10B981; --palette-green-muted: rgba(16, 185, 129, 0.12); --palette-amber: #F59E0B; --palette-amber-muted: rgba(245, 158, 11, 0.12); --palette-red: #EF4444; --palette-red-muted: rgba(239, 68, 68, 0.12); /* Reading surface — light background for content-heavy areas */ --palette-reading-bg: #F5F7FA; --palette-reading-text: #1A1A2E; /* ------------------------------------------------------------------------- 2. SEMANTIC COLOUR TOKENS — What colours mean, not what they are. These are what you use throughout components.css, sections.css, etc. ------------------------------------------------------------------------- */ /* Backgrounds */ --color-bg-page: var(--palette-black); --color-bg-surface: var(--palette-surface); --color-bg-surface-alt: var(--palette-surface-alt); --color-bg-reading: var(--palette-reading-bg); /* Borders */ --color-border: var(--palette-border); --color-border-light: var(--palette-border-light); /* Text */ --color-text-primary: var(--palette-white); --color-text-secondary: var(--palette-white-muted); --color-text-muted: var(--palette-slate-400); --color-text-faint: var(--palette-white-faint); --color-text-reading: var(--palette-reading-text); /* Accents */ --color-accent-primary: var(--palette-cyan); --color-accent-primary-dim: var(--palette-cyan-dim); --color-accent-primary-bg: var(--palette-cyan-muted); --color-accent-primary-glow: var(--palette-cyan-glow); --color-accent-secondary: var(--palette-purple); --color-accent-secondary-dim: var(--palette-purple-dim); --color-accent-secondary-bg: var(--palette-purple-muted); --color-accent-secondary-glow: var(--palette-purple-glow); /* Difficulty */ --color-easy: var(--palette-green); --color-easy-bg: var(--palette-green-muted); --color-medium: var(--palette-amber); --color-medium-bg: var(--palette-amber-muted); --color-hard: var(--palette-red); --color-hard-bg: var(--palette-red-muted); /* ------------------------------------------------------------------------- 3. TYPOGRAPHY ------------------------------------------------------------------------- */ /* Font families */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* Type scale — used for font-size */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed:1.625; --leading-loose: 1.8; /* Font weights */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold:800; /* ------------------------------------------------------------------------- 4. SPACING SCALE — Base unit: 4px (0.25rem) Used for padding, margin, gap. Never use arbitrary pixel values. ------------------------------------------------------------------------- */ --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 */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ------------------------------------------------------------------------- 5. BORDER RADIUS ------------------------------------------------------------------------- */ --radius-sm: 0.25rem; /* 4px — small badges, tags */ --radius-md: 0.5rem; /* 8px — buttons, inputs */ --radius-lg: 0.75rem; /* 12px — cards */ --radius-xl: 1rem; /* 16px — large cards */ --radius-2xl: 1.5rem; /* 24px — feature cards */ --radius-full: 9999px; /* pill shape */ /* ------------------------------------------------------------------------- 6. SHADOWS & GLOWS Glow rule: primary CTA button + hover states only. Nowhere else. ------------------------------------------------------------------------- */ /* Card shadows — depth without colour */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7); /* Glows — used sparingly */ --glow-cyan: 0 0 20px var(--color-accent-primary-glow); --glow-cyan-strong: 0 0 40px var(--color-accent-primary-glow), 0 0 80px rgba(0, 229, 255, 0.1); --glow-purple: 0 0 20px var(--color-accent-secondary-glow); /* Inner border glow — for card hover states */ --border-glow-cyan: inset 0 0 0 1px rgba(0, 229, 255, 0.3); --border-glow-purple: inset 0 0 0 1px rgba(139, 92, 246, 0.3); /* ------------------------------------------------------------------------- 7. TRANSITIONS Keep animations subtle and purposeful. Respect prefers-reduced-motion (handled in base.css). ------------------------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ------------------------------------------------------------------------- 8. Z-INDEX SCALE Named layers prevent z-index wars. ------------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ------------------------------------------------------------------------- 9. LAYOUT ------------------------------------------------------------------------- */ --container-max: 1200px; --container-narrow: 720px; /* for reading-width sections */ --container-padding: var(--space-6); --nav-height: 64px; /* Workflow accent line — for the vertical connector between steps */ --workflow-line-color: rgba(0, 229, 255, 0.15); /* Subtle inset background — for the workflow area (optional) */ --color-bg-inset: rgba(26, 35, 50, 0.5); } /* -------------------------------------------------------------------------- LIGHT MODE OVERRIDES – clean, readable, consistent -------------------------------------------------------------------------- */ .light-mode { --color-bg-page: #F9FAFB; --color-bg-surface: #FFFFFF; --color-bg-surface-alt: #F3F4F6; --color-border: #E5E7EB; --color-border-light: #D1D5DB; --color-text-primary: #111827; --color-text-secondary: #4B5563; --color-text-muted: #6B7280; --color-text-faint: #9CA3AF; --color-accent-primary: #0F67B3; --color-accent-primary-dim: #0A4E8A; --color-accent-primary-bg: #EFF6FF; --color-accent-primary-glow: rgba(15, 103, 179, 0.2); --color-accent-secondary: #6D28D9; --color-accent-secondary-dim: #5B21B6; --color-accent-secondary-bg: #F5F3FF; --color-accent-secondary-glow: rgba(109, 40, 217, 0.15); --color-easy: #0B7B4A; --color-easy-bg: #ECFDF5; --color-medium: #B45309; --color-medium-bg: #FFFBEB; --color-hard: #B91C1C; --color-hard-bg: #FEF2F2; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.15); --workflow-line-color: #CBD5E1; }