/* ========================================================================== FaasTrader — tokens.css The single source of truth for the visual language. Every color, size, and easing curve in the project is derived from here — change a value once, it propagates everywhere. This is what makes the system scale. ========================================================================== */ :root{ color-scheme: light; /* ---- Brand ---- */ --brand-50: #eefaf1; --brand-100: #d3f3dd; --brand-300: #7cdb9a; --brand-500: #16A34A; --brand-600: #0f8f3f; --brand-700: #0c7534; --brand-900: #0a3a1e; --accent-teal: #0ea5a3; --accent-amber: #f5a524; --accent-violet:#7c6df2; --grad-brand: linear-gradient(135deg, var(--brand-500), var(--accent-teal) 130%); --grad-brand-soft: linear-gradient(135deg, rgba(22,163,74,.14), rgba(14,165,163,.10)); --grad-mesh: radial-gradient(60% 50% at 85% 8%, rgba(22,163,74,.14), transparent 60%), radial-gradient(45% 40% at 8% 90%, rgba(14,165,163,.10), transparent 60%), radial-gradient(35% 35% at 50% 0%, rgba(124,109,242,.06), transparent 60%); --grad-dark: radial-gradient(120% 70% at 15% -10%, rgba(22,163,74,.20), transparent 55%), linear-gradient(165deg,#060c14,#0b1424 55%,#0e1c2e); /* ---- Neutral / surface tokens (flip in dark theme below) ---- */ --bg: #fcfdfc; --bg-alt: var(--brand-50); --surface: #ffffff; --surface-2: #f6f9f7; --text: #0b1424; --text-muted: #5b6779; --text-faint: #8a94a4; --border: #e6ece7; --border-strong:#d3ddd6; /* Fixed-dark tokens (used for intentionally-dark sections regardless of theme) */ --ink-950:#060c14; --ink-900:#0b1424; --ink-700:#1c2a3d; --ink-500:#5c6a80; /* ---- Elevation ---- */ --shadow-xs: 0 1px 2px rgba(10,20,15,.04); --shadow-sm: 0 4px 16px rgba(10,20,15,.06); --shadow-md: 0 10px 30px rgba(10,20,15,.09); --shadow-lg: 0 24px 60px rgba(10,20,15,.14); --shadow-glow: 0 0 0 1px rgba(22,163,74,.12), 0 12px 30px rgba(22,163,74,.22); /* ---- Radii ---- */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* ---- Fluid type scale (clamp: min, preferred(vw), max) ---- */ --fs-xs: clamp(.75rem, .72rem + .12vw, .8125rem); --fs-sm: clamp(.8125rem, .78rem + .16vw, .875rem); --fs-base: clamp(.9375rem, .9rem + .2vw, 1rem); --fs-md: clamp(1.0625rem, 1rem + .3vw, 1.125rem); --fs-lg: clamp(1.25rem, 1.15rem + .5vw, 1.5rem); --fs-xl: clamp(1.6rem, 1.35rem + 1.2vw, 2.1rem); --fs-2xl: clamp(2rem, 1.6rem + 2vw, 2.75rem); --fs-3xl: clamp(2.4rem, 1.8rem + 3vw, 3.6rem); /* ---- Fluid spacing scale ---- */ --sp-2xs: clamp(.375rem, .35rem + .1vw, .5rem); --sp-xs: clamp(.625rem, .58rem + .2vw, .75rem); --sp-sm: clamp(1rem, .92rem + .3vw, 1.25rem); --sp-md: clamp(1.5rem, 1.3rem + .8vw, 2rem); --sp-lg: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem); --sp-xl: clamp(3.5rem, 2.6rem + 3.6vw, 5.5rem); --sp-2xl: clamp(5rem, 3.6rem + 5.6vw, 8rem); --container: 1240px; --container-narrow: 760px; --nav-h: 76px; /* ---- Motion ---- */ --ease-out: cubic-bezier(.16,.8,.24,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --dur-fast: .18s; --dur-base: .32s; --dur-slow: .6s; --font-display: 'Clash Grotesk Fallback','Plus Jakarta Sans',system-ui,sans-serif; --font-body: 'Inter',system-ui,sans-serif; } /* ---- Dark theme: same tokens, different surfaces. Toggled via [data-theme] on . A system-preference block sets the default before JS runs (no flash of wrong theme); an explicit [data-theme="dark"] class (set by the toggle + persisted to localStorage) always wins, and [data-theme="light"] opts back out even on a dark system. ---- */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: dark; --bg: #070c13; --bg-alt: #0c1420; --surface: #0e1826; --surface-2: #101c2c; --text: #f1f5f9; --text-muted:#98a6ba; --text-faint:#6b7d94; --border: #1d2a3c; --border-strong:#2a3a50; --shadow-md: 0 10px 30px rgba(0,0,0,.45); --shadow-lg: 0 24px 60px rgba(0,0,0,.55); } } :root[data-theme="dark"]{ color-scheme: dark; --bg: #070c13; --bg-alt: #0c1420; --surface: #0e1826; --surface-2: #101c2c; --text: #f1f5f9; --text-muted:#98a6ba; --text-faint:#6b7d94; --border: #1d2a3c; --border-strong:#2a3a50; --shadow-md: 0 10px 30px rgba(0,0,0,.45); --shadow-lg: 0 24px 60px rgba(0,0,0,.55); }