/* ============================================================ Sona — design tokens Three switchable directions via [data-theme] on . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { --font-display: 'Space Grotesk', system-ui, sans-serif; --font-ui: 'Manrope', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --r-xs: 6px; --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --maxw: 1240px; } /* ---------- MIDNIGHT (default) : premium indigo dark ---------- */ :root, [data-theme="midnight"] { --bg: oklch(0.165 0.016 264); --bg-1: oklch(0.205 0.018 264); --bg-2: oklch(0.245 0.020 264); --bg-3: oklch(0.285 0.022 264); --border: oklch(0.32 0.020 264); --border-2: oklch(0.40 0.024 264); --text: oklch(0.975 0.004 264); --text-2: oklch(0.74 0.013 264); --text-3: oklch(0.585 0.016 264); --accent: oklch(0.645 0.168 277); --accent-2: oklch(0.70 0.165 277); --accent-ink: oklch(0.99 0 0); --accent-soft: oklch(0.30 0.075 277); --accent-glow: oklch(0.645 0.168 277 / 0.35); --ok: oklch(0.74 0.15 158); --ok-soft: oklch(0.32 0.06 158); --warn: oklch(0.80 0.14 82); --warn-soft: oklch(0.34 0.06 82); --bad: oklch(0.67 0.19 24); --bad-soft: oklch(0.33 0.09 24); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 8px 24px -8px rgba(0,0,0,.55); --shadow-lg: 0 30px 70px -20px rgba(0,0,0,.65); --hero-grad: radial-gradient(120% 120% at 80% 0%, oklch(0.36 0.13 290 / .55), transparent 55%), radial-gradient(90% 90% at 0% 100%, oklch(0.34 0.10 230 / .45), transparent 60%); color-scheme: dark; } /* ---------- DAYLIGHT : clean editorial light ---------- */ [data-theme="daylight"] { --bg: oklch(0.984 0.003 95); --bg-1: oklch(1 0 0); --bg-2: oklch(0.968 0.004 95); --bg-3: oklch(0.945 0.005 95); --border: oklch(0.912 0.005 95); --border-2: oklch(0.85 0.007 95); --text: oklch(0.235 0.015 264); --text-2: oklch(0.46 0.013 264); --text-3: oklch(0.60 0.011 264); --accent: oklch(0.515 0.155 264); --accent-2: oklch(0.45 0.16 264); --accent-ink: oklch(0.99 0 0); --accent-soft: oklch(0.95 0.032 264); --accent-glow: oklch(0.515 0.155 264 / 0.18); --ok: oklch(0.55 0.14 158); --ok-soft: oklch(0.93 0.05 158); --warn: oklch(0.62 0.13 70); --warn-soft: oklch(0.94 0.06 80); --bad: oklch(0.55 0.19 25); --bad-soft: oklch(0.95 0.05 25); --shadow-sm: 0 1px 2px rgba(16,18,28,.06); --shadow-md: 0 10px 30px -12px rgba(16,18,28,.16); --shadow-lg: 0 36px 80px -28px rgba(16,18,28,.22); --hero-grad: radial-gradient(120% 120% at 82% 0%, oklch(0.90 0.06 264 / .8), transparent 55%), radial-gradient(90% 90% at 0% 100%, oklch(0.93 0.04 200 / .7), transparent 60%); color-scheme: light; } /* ---------- STUDIO : bold warm amber dark ---------- */ [data-theme="studio"] { --bg: oklch(0.155 0.008 60); --bg-1: oklch(0.198 0.010 60); --bg-2: oklch(0.242 0.012 58); --bg-3: oklch(0.285 0.014 58); --border: oklch(0.31 0.014 58); --border-2: oklch(0.40 0.018 58); --text: oklch(0.975 0.008 80); --text-2: oklch(0.745 0.016 72); --text-3: oklch(0.565 0.020 64); --accent: oklch(0.745 0.165 64); --accent-2: oklch(0.79 0.155 66); --accent-ink: oklch(0.20 0.03 60); --accent-soft: oklch(0.31 0.065 62); --accent-glow: oklch(0.745 0.165 64 / 0.32); --ok: oklch(0.76 0.15 150); --ok-soft: oklch(0.32 0.06 150); --warn: oklch(0.82 0.14 88); --warn-soft: oklch(0.34 0.06 84); --bad: oklch(0.68 0.19 28); --bad-soft: oklch(0.33 0.09 28); --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow-md: 0 8px 24px -8px rgba(0,0,0,.6); --shadow-lg: 0 30px 70px -20px rgba(0,0,0,.7); --hero-grad: radial-gradient(120% 120% at 80% 0%, oklch(0.42 0.13 60 / .6), transparent 55%), radial-gradient(90% 90% at 0% 100%, oklch(0.36 0.10 35 / .5), transparent 60%); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-ui); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01","cv01","cv11"; } ::selection { background: var(--accent-soft); color: var(--text); } h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.05; } p { margin: 0; } button { font-family: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } input, textarea, select { font-family: inherit; } .mono { font-family: var(--font-mono); } .tnum { font-variant-numeric: tabular-nums; } /* scrollbars */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; } *::-webkit-scrollbar-track { background: transparent; } @keyframes sona-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes sona-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes sona-eq { 0%,100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } } @keyframes sona-spin { to { transform: rotate(360deg); } }