/* ============================================================ MUNHU — Design tokens Afro-futurist: deep night base, electric indigo, warm gold. Every section consumes these custom properties. ============================================================ */ :root { /* ---- Brand palette ---- */ --night-900: #06060a; --night-800: #0a0a0f; --night-700: #101018; --night-600: #16161f; --night-500: #1d1d29; --line: #262633; --indigo: #667eea; --indigo-bright: #818cf8; --indigo-deep: #4338ca; --violet: #764ba2; --gold: #ffdd00; --gold-warm: #fbb034; --ember: #ff5a1f; --paper: #f4f4fb; --muted: #a3a3b8; --muted-2: #6f6f86; /* ---- Semantic ---- */ --bg: var(--night-900); --bg-elev: var(--night-700); --bg-card: var(--night-600); --text: var(--paper); --text-soft: var(--muted); --accent: var(--indigo); --accent-2: var(--gold); --border: var(--line); /* Platform colors (carried over for the follow strip) */ --tiktok: #ff0050; --youtube: #ff0000; --facebook: #1877f2; --twitter: #e7e7e7; --instagram: #e1306c; --linkedin: #0a66c2; /* ---- Gradients ---- */ --grad-brand: linear-gradient(135deg, var(--indigo) 0%, var(--violet) 100%); --grad-gold: linear-gradient(135deg, var(--gold) 0%, var(--gold-warm) 100%); --grad-aurora: radial-gradient(1200px 600px at 20% -10%, rgba(102,126,234,.25), transparent 60%), radial-gradient(900px 500px at 90% 0%, rgba(118,75,162,.20), transparent 55%), radial-gradient(700px 700px at 50% 120%, rgba(251,176,52,.10), transparent 60%); /* ---- Type ---- */ --font-display: "Space Grotesk", "Heebo", system-ui, sans-serif; --font-body: "Heebo", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.875rem; --fs-2xl: 2.5rem; --fs-3xl: clamp(2.5rem, 7vw, 5.5rem); /* ---- Space ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; /* ---- Radius / shadow / motion ---- */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px; --shadow-sm: 0 2px 8px rgba(0,0,0,.35); --shadow-md: 0 10px 30px rgba(0,0,0,.45); --shadow-glow: 0 0 0 1px rgba(102,126,234,.25), 0 12px 40px rgba(102,126,234,.25); --ease: cubic-bezier(.22,.61,.36,1); --dur: 320ms; --container: 1200px; --header-h: 64px; } /* Light theme opt-in (toggled via [data-theme="light"] on ) */ :root[data-theme="light"] { --bg: #f6f6fb; --bg-elev: #ffffff; --bg-card: #ffffff; --text: #14141d; --text-soft: #50506a; --border: #e4e4ee; --shadow-md: 0 10px 30px rgba(20,20,40,.12); --grad-aurora: radial-gradient(1200px 600px at 20% -10%, rgba(102,126,234,.18), transparent 60%), radial-gradient(900px 500px at 90% 0%, rgba(118,75,162,.12), transparent 55%); } @media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }