/* ========================================================================== DESIGN TOKENS — theme accents + the base custom-property system. Every other file in this project reads colors, spacing and motion values from here rather than hardcoding them, so the whole site re-skins by swapping a single [data-theme] attribute on . ========================================================================== */ :root, [data-theme="purple"] { --accent: #a855f7; --accent-2: #ec4899; --accent-3: #6366f1; --accent-rgb: 168,85,247; } [data-theme="aqua"] { --accent:#22d3ee; --accent-2:#38bdf8; --accent-3:#818cf8; --accent-rgb:34,211,238; } [data-theme="blue"] { --accent:#3b82f6; --accent-2:#06b6d4; --accent-3:#8b5cf6; --accent-rgb:59,130,246; } [data-theme="green"] { --accent:#22c55e; --accent-2:#4ade80; --accent-3:#06b6d4; --accent-rgb:34,197,94; } [data-theme="pink"] { --accent:#ec4899; --accent-2:#d946ef; --accent-3:#f472b6; --accent-rgb:236,72,153; } [data-theme="orange"] { --accent:#f97316; --accent-2:#eab308; --accent-3:#ef4444; --accent-rgb:249,115,22; } [data-theme="red"] { --accent:#ef4444; --accent-2:#f97316; --accent-3:#ec4899; --accent-rgb:239,68,68; } [data-theme="black"] { --accent:#e5e7eb; --accent-2:#9ca3af; --accent-3:#f3f4f6; --accent-rgb:229,231,235; } :root { /* base surfaces */ --bg: #08090c; --bg-soft: #0c0e14; --panel: rgba(255,255,255,.045); --panel-strong: rgba(255,255,255,.075); --border: rgba(255,255,255,.1); --border-soft: rgba(255,255,255,.065); --highlight: rgba(255,255,255,.07); /* top inner edge on glass panels */ --text: #f5f6fa; --text-dim: #9ba1b4; --text-faint: #63697c; /* type — Geist for display/personality, Inter for long-form body copy, Geist Mono for small system/code-ish labels. All three fall back to widely-available neutral grotesks if a font fails to load. */ --font-display: 'Geist', 'Inter', -apple-system, sans-serif; --font-body: 'Inter', 'Geist', -apple-system, sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace; /* layout */ --container: 1240px; --section-py: clamp(5rem, 9vw, 8.5rem); --radius-sm: 12px; --radius-md: 20px; --radius-lg: 28px; --radius-xl: 36px; /* motion */ --ease: cubic-bezier(.16,1,.3,1); /* expo-out — the default for premium settle-in motion */ --ease-soft: cubic-bezier(.4,0,.2,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --dur: .6s; /* realistic, layered shadows — reused across every card/panel so depth reads consistently across the whole site */ --shadow-sm: 0 2px 10px -2px rgba(0,0,0,.35); --shadow-md: 0 16px 40px -12px rgba(0,0,0,.5); --shadow-lg: 0 30px 70px -16px rgba(0,0,0,.6); --z-bg: 0; --z-content: 10; --z-header: 500; --z-cursor: 900; --z-preloader: 1000; } html[data-theme] { transition: color .5s var(--ease-soft); }