/* Design tokens — dark is default, .light-mode overrides on */ :root { /* base surfaces */ --bg: #0a0d12; --bg-elevated: #10141b; --bg-elevated-2: #151a22; --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.16); /* text */ --text-primary: #e9edf2; --text-secondary: #99a3b1; --text-tertiary: #8a93a3; /* accents */ --accent: #5b8cff; --accent-rgb: 91, 140, 255; --accent-soft: rgba(91, 140, 255, 0.12); --accent-strong: #7ea2ff; --rnd: #e0a458; --rnd-soft: rgba(224, 164, 88, 0.12); /* semantic */ --shadow: 0 12px 40px rgba(0, 0, 0, 0.35); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; /* type */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* layout */ --container: 1180px; --gutter: clamp(1.25rem, 4vw, 4rem); /* motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-sm: 0.2s; --dur-md: 0.45s; --dur-lg: 0.8s; } body.light-mode { --bg: #f6f7f9; --bg-elevated: #ffffff; --bg-elevated-2: #eef0f3; --border: rgba(10, 13, 18, 0.09); --border-strong: rgba(10, 13, 18, 0.18); --text-primary: #12161d; --text-secondary: #4c5563; --text-tertiary: #5a6270; --accent: #3763db; --accent-rgb: 55, 99, 219; --accent-soft: rgba(55, 99, 219, 0.1); --accent-strong: #2a4fb8; --rnd: #b5762a; --rnd-soft: rgba(181, 118, 42, 0.12); --shadow: 0 12px 40px rgba(20, 24, 33, 0.12); } @media (prefers-reduced-motion: reduce) { :root { --dur-sm: 0.01s; --dur-md: 0.01s; --dur-lg: 0.01s; } }