/* ========================================================================= EVO Design System — Tokens (SSOT) Single source of truth for colors, typography, spacing, radii, effects. Override by scoping [data-theme="light"] on . ========================================================================= */ /* ---------- Fonts ---------- */ @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"); /* ---------- Dark theme (default) ---------- */ :root, [data-theme="dark"] { color-scheme: dark; /* Brand */ --primary: #E8956A; --primary-2: #F0A87E; --primary-3: #C67448; --primary-ink: #1a0f08; /* Surfaces */ --bg: #0E0E13; --bg-2: #0A0A0F; --card: #151519; --card-2: #1C1C22; --elevated: #1F1F26; /* Text */ --text: #EDEDED; --text-strong: #FFFFFF; --muted: #9D9DA8; --muted-2: #6E6E78; /* Lines */ --border: #272729; --border-2: #34343A; --border-strong:#40404A; /* Status */ --destructive: #E85858; --success: #6ED4A4; --warning: #E8C86A; --info: #6AAFE8; /* Tinted fills (used by badges, icon pills, etc.) */ --primary-fill: rgba(232,149,106,0.14); --primary-fill-2: rgba(232,149,106,0.22); --primary-border: rgba(232,149,106,0.30); --primary-border-2: rgba(232,149,106,0.55); --info-fill: rgba(106,175,232,0.12); --info-border: rgba(106,175,232,0.25); --success-fill: rgba(110,212,164,0.12); --success-border: rgba(110,212,164,0.25); --warning-fill: rgba(232,200,106,0.12); --warning-border: rgba(232,200,106,0.25); --destructive-fill: rgba(232,88,88,0.12); --destructive-border:rgba(232,88,88,0.28); /* Glow effects (dark only — in light they soften) */ --glow-primary: 0 0 24px rgba(232,149,106,0.35); --glow-btn: 0 0 20px rgba(232,149,106,0.40); --glow-card: 0 0 20px rgba(232,149,106,0.20); /* Radial ambient halos for page backgrounds */ --bg-halo-1: radial-gradient(1200px 600px at 80% -10%, rgba(232,149,106,0.10), transparent 60%); --bg-halo-2: radial-gradient(900px 500px at -10% 110%, rgba(232,149,106,0.06), transparent 60%); --grain-opacity: 0.035; --grain-color-matrix: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0"; /* white noise */ } /* ---------- Light theme — warm cream / milky ---------- */ [data-theme="light"] { color-scheme: light; --primary: #C67448; /* deeper copper reads correctly on cream */ --primary-2: #E8956A; --primary-3: #9F5630; --primary-ink: #FFFFFF; --bg: #F6F1EA; /* warm milky paper */ --bg-2: #EFE8DE; --card: #FFFCF7; --card-2: #F2EBE0; --elevated: #FFFFFF; --text: #1C1613; --text-strong: #000000; --muted: #6B6158; --muted-2: #9A9086; --border: #E3DAC9; --border-2: #D3C9B5; --border-strong:#B9AE97; --destructive: #C94A4A; --success: #3D9A6B; --warning: #B8892C; --info: #3F7BB8; --primary-fill: rgba(198,116,72,0.10); --primary-fill-2: rgba(198,116,72,0.18); --primary-border: rgba(198,116,72,0.30); --primary-border-2: rgba(198,116,72,0.55); --info-fill: rgba(63,123,184,0.08); --info-border: rgba(63,123,184,0.25); --success-fill: rgba(61,154,107,0.10); --success-border: rgba(61,154,107,0.25); --warning-fill: rgba(184,137,44,0.10); --warning-border: rgba(184,137,44,0.25); --destructive-fill: rgba(201,74,74,0.10); --destructive-border:rgba(201,74,74,0.28); /* Light mode softens glows → keep warm but drop saturation */ --glow-primary: 0 6px 24px rgba(198,116,72,0.18); --glow-btn: 0 8px 20px rgba(198,116,72,0.22); --glow-card: 0 10px 24px rgba(198,116,72,0.12); --bg-halo-1: radial-gradient(1200px 600px at 80% -10%, rgba(198,116,72,0.08), transparent 60%); --bg-halo-2: radial-gradient(900px 500px at -10% 110%, rgba(198,116,72,0.05), transparent 60%); --grain-opacity: 0.025; --grain-color-matrix: "0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.7 0"; /* warm ink noise */ } /* ---------- Structural tokens (theme-agnostic) ---------- */ :root { /* Radii */ --radius-xs: 4px; --radius-sm: 8px; --radius: 12.8px; --radius-lg: 20px; --radius-pill: 999px; /* Spacing (4px baseline) */ --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; /* Typography */ --font-head: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --fs-display: clamp(36px, 5.6vw, 56px); --fs-h2: clamp(28px, 3.4vw, 40px); --fs-h3: 22px; --fs-body: 17px; --fs-small: 15px; --fs-micro: 13px; --fs-mono: 12px; --lh-tight: 1.05; --lh-body: 1.55; /* Motion */ --ease-out: cubic-bezier(.2,.8,.2,1); --ease-in: cubic-bezier(.6,.1,.9,.4); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; /* Breakpoints (for JS read-only — CSS uses @media) */ --bp-mobile: 375px; --bp-tablet: 768px; --bp-desk: 1024px; --bp-wide: 1280px; /* Z-index scale */ --z-base: 1; --z-sticky: 10; --z-nav: 40; --z-overlay: 90; --z-modal: 100; --z-toast: 120; }