/** * tokens.css * Design token system — single source of truth. * All colours, spacing, type, radius and shadow values live here. * Import this file first before any other stylesheet. */ :root { /* ── Colour palette ──────────────────────── */ --c-red: #C8102E; --c-red-dark: #A00C24; --c-red-muted: rgba(200, 16, 46, 0.08); --c-charcoal: #1A1A2E; --c-charcoal-mid: #2C2C44; --c-gold: #E8A020; --c-gold-muted: rgba(232, 160, 32, 0.12); --c-black: #0D0D0D; --c-white: #FFFFFF; /* ── Surface & neutral ───────────────────── */ --c-bg: #F4F4EF; --c-surface: #FFFFFF; --c-surface-alt: #F9F9F6; --c-border: #E2E2DB; --c-border-dark: #CDCDC5; /* ── Text hierarchy ──────────────────────── */ --c-text-primary: #0D0D0D; --c-text-secondary: #444451; --c-text-muted: #6B7280; --c-text-faint: #9CA3AF; /* ── Category badge colours ──────────────── */ --c-cat-politics: #C8102E; --c-cat-business: #0D6EFD; --c-cat-sports: #198754; --c-cat-tech: #6610F2; --c-cat-entertain: #D63384; --c-cat-world: #0A85A0; --c-cat-health: #0D7F6A; --c-cat-education: #B45309; --c-cat-lifestyle: #7C3AED; --c-cat-science: #1D4ED8; /* ── Typography ──────────────────────────── */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* ── Type scale (fluid) ──────────────────── */ --text-xs: 0.6875rem; /* 11px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-md: 1.0625rem; /* 17px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.875rem; /* 30px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: clamp(2rem, 5vw, 3rem); /* ── Spacing scale ───────────────────────── */ --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 */ /* ── Border radius ───────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ── Shadows ─────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06); --shadow-lg: 0 8px 28px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06); --shadow-xl: 0 16px 48px rgba(0,0,0,0.14); --shadow-red: 0 4px 14px rgba(200,16,46,0.35); /* ── Transitions ─────────────────────────── */ --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-xs: 120ms; --duration-sm: 200ms; --duration-md: 300ms; --duration-lg: 450ms; /* ── Layout ──────────────────────────────── */ --nav-h: 60px; --topbar-h: 36px; --container-max: 1280px; --sidebar-w: 320px; --content-max: 720px; /* ── Z-index scale ───────────────────────── */ --z-base: 0; --z-card: 10; --z-sticky: 100; --z-nav: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ── Dark mode token overrides ─────────────── Activated via [data-theme="dark"] on . Only override what changes; tokens cascade. */ [data-theme="dark"] { --c-bg: #0F0F17; --c-surface: #1A1A2E; --c-surface-alt: #141421; --c-border: #2E2E44; --c-border-dark: #3A3A52; --c-text-primary: #F0F0F0; --c-text-secondary: #C0C0CC; --c-text-muted: #8080A0; --c-text-faint: #5A5A78; }