/* ============================================================ CrumpIT — Design Tokens (Phase 0 · single source of truth) Dark mode = default · Light mode = [data-theme="light"] on Only tokens live here. No component styling. ============================================================ */ /* Layer order declared once, up front, so later files can override predictably regardless of order (kills margin/padding cancellation between section rules). */ @layer tokens, base, components, particles, pages; @layer tokens { :root { /* ---- Core palette — DARK (default) ---- */ --bg: #0a0a0c; --surface: #111116; --surface-alt: #18181f; --border: #1e1e2a; --accent: #0093e2; --accent-dim: #0077b8; --accent-glow: rgba(0, 147, 226, 0.18); --text: #e8eaf0; --text-muted: #7880a0; --success: #00c48c; --warning: #ffb400; --danger: #e23c3c; /* ---- Accent tints (derived from --accent — additive, not a new colour) ---- */ --accent-08: rgba(0, 147, 226, 0.08); --accent-14: rgba(0, 147, 226, 0.14); --accent-24: rgba(0, 147, 226, 0.24); --accent-40: rgba(0, 147, 226, 0.40); --danger-16: rgba(226, 60, 60, 0.16); /* ---- Typography ---- */ --font-display: 'Orbitron', 'Segoe UI', sans-serif; /* headings — uppercase, wide */ --font-body: 'Inter', 'Segoe UI', sans-serif; /* body copy */ --font-ui: 'Rajdhani', 'Segoe UI', sans-serif; /* labels / data / UI chrome */ /* Type scale — 12 / 14 / 16 / 18 / 20 / 24 / 32 / 40 / 56 / 80 */ --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-32: 2rem; --fs-40: 2.5rem; --fs-56: 3.5rem; --fs-80: 5rem; /* Fluid display sizes — resolve within the ramp above */ --fs-hero: clamp(2.5rem, 6vw, 5rem); --fs-h2: clamp(1.75rem, 3.4vw, 2.5rem); --fs-h3: clamp(1.25rem, 2vw, 1.5rem); --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.6; --ls-display: 0.08em; /* Orbitron: brief calls for 0.06–0.12em */ --ls-ui: 0.14em; /* ---- Spacing scale (0.25rem base) ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; /* ---- Radius ---- */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px; /* ---- Layout ---- */ --container: 1240px; --container-narrow: 780px; --header-h: 72px; /* ---- Signature blade — true ~30deg edges (dy/dx ≈ tan 30° ≈ 0.577) ---- */ --blade-sm: polygon(0 0, calc(100% - 20px) 0, 100% 12px, 100% 100%, 0 100%); --blade-md: polygon(0 0, calc(100% - 34px) 0, 100% 20px, 100% 100%, 0 100%); --blade-lg: polygon(0 0, calc(100% - 52px) 0, 100% 30px, 100% 100%, 0 100%); /* ---- Motion ---- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0, 0.55, 0.45, 1); --spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 480ms; /* ---- Glow / elevation ---- */ --glow-sm: 0 0 18px var(--accent-glow); --glow-md: 0 0 34px var(--accent-glow); --shadow-1: 0 6px 24px rgba(0, 0, 0, 0.35); --shadow-2: 0 18px 50px rgba(0, 0, 0, 0.50); /* ---- Z-index scale ---- */ --z-bg: 0; --z-content: 1; --z-header: 1000; --z-overlay: 1100; --z-modal: 1200; --z-toast: 1300; color-scheme: dark; } /* ========================================================= LIGHT THEME — swaps surfaces + text only, accents unchanged ========================================================= */ [data-theme="light"] { --bg: #f0f2f7; --surface: #ffffff; --surface-alt: #e8eaf2; --border: #d0d4e8; --text: #0e0e1a; --text-muted: #5a5f7a; /* accent + status colours stay identical across themes */ --accent-08: rgba(0, 147, 226, 0.06); --accent-14: rgba(0, 147, 226, 0.10); --accent-24: rgba(0, 147, 226, 0.16); --shadow-1: 0 6px 24px rgba(20, 30, 60, 0.10); --shadow-2: 0 18px 50px rgba(20, 30, 60, 0.16); color-scheme: light; } }