/* ============================================================ ELEVEN — Design Tokens Premium UI token system: colors, typography, spacing, shadows ARCHITECTURE: - :root defines dark mode (default) + all structural tokens - body.light-mode overrides only color/shadow tokens - Navbar transparency uses dedicated tokens (no hardcoded rgba) - Silver shadow system uses cool-toned greys to avoid "cheap" warmth - All theme-transitioning properties listed explicitly for GPU-friendly animation ============================================================ */ :root { /* ── Color Palette: Dark (Default) ─────────────────────── */ --color-bg: #050505; --color-surface: #0e0e0e; --color-surface-raised: #161616; --color-surface-inset: #0a0a0a; --color-border: rgba(255, 255, 255, 0.06); --color-border-hover: rgba(255, 255, 255, 0.15); --color-border-active: rgba(255, 255, 255, 0.25); --color-text: #ffffff; --color-text-muted: #888888; --color-text-subtle: #555555; --color-accent: #b8b8c0; --color-accent-hover: #d0d0d8; --color-glass: rgba(255, 255, 255, 0.03); --color-outline-stroke: #ffffff; /* Buttons */ --color-btn-bg: #ffffff; --color-btn-text: #050505; --color-btn-ghost-bg: transparent; --color-btn-ghost-border:rgba(255, 255, 255, 0.10); --color-btn-ghost-text: #888888; /* Nav transparency (scroll state) */ --color-nav-bg: rgba(5, 5, 5, 0.88); --color-nav-border: rgba(255, 255, 255, 0.04); /* Focus ring */ --color-focus: rgba(180, 180, 200, 0.5); /* Progress bar */ --color-progress: linear-gradient(90deg, rgba(180,180,192,0.3), rgba(255,255,255,0.8)); /* Overlay / scrim */ --color-overlay: rgba(0, 0, 0, 0.6); /* ── Typography ────────────────────────────────────────── */ --font-display: 'Syncopate', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --font-weight-thin: 200; --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; --text-display: clamp(48px, 6vw, 84px); --text-h2: clamp(32px, 4vw, 56px); --text-h3: clamp(20px, 2vw, 28px); --text-body: 17px; --text-body-sm: 15px; --text-caption: 11px; --text-micro: 9px; /* ── Spacing (8px base grid) ───────────────────────────── */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 100px; --space-4xl: 160px; --space-5xl: 220px; --container-max: 1400px; --container-pad: clamp(24px, 5vw, 80px); /* ── Border Radius ─────────────────────────────────────── */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 40px; --radius-full: 9999px; /* ── Shadows: Silver/Chrome System ─────────────────────── PHILOSOPHY: - Use cool-grey (180,180,192) not warm-grey — avoids "muddy" look - Multi-layer shadows: a tight near-shadow + a diffuse far-shadow creates depth without a single heavy blob - Dark mode: silver shows as a subtle cool halo - Light mode: same hue, higher opacity for definition against white - Never use pure black shadows on cards — always silver-tinted */ --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(180, 180, 192, 0.06); --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(180, 180, 192, 0.08); --shadow-elevated: 0 4px 8px rgba(0, 0, 0, 0.06), 0 20px 60px rgba(180, 180, 192, 0.12); --shadow-float: 0 4px 12px rgba(0, 0, 0, 0.08), 0 40px 100px rgba(180, 180, 192, 0.10); --shadow-glow: 0 0 0 1px rgba(200, 200, 210, 0.06), 0 0 40px rgba(200, 200, 210, 0.08); --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.12); /* Toggle button shadow (for the theme switch pill) */ --shadow-toggle: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.06); /* ── Motion ────────────────────────────────────────────── */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 200ms; --duration-normal: 400ms; --duration-slow: 800ms; --duration-theme: 600ms; --transition-theme: var(--duration-theme) var(--ease-smooth); --transition-hover: var(--duration-normal) var(--ease-smooth); /* Explicit list of properties that transition on theme change. By listing them, we avoid 'transition: all' which is expensive. */ --theme-props: background-color, color, border-color, box-shadow, outline-color, fill, stroke; } /* ── Light Mode Overrides ──────────────────────────────────── */ body.light-mode { --color-bg: #fafafa; --color-surface: #f2f2f2; --color-surface-raised: #e8e8e8; --color-surface-inset: #ebebeb; --color-border: rgba(0, 0, 0, 0.06); --color-border-hover: rgba(0, 0, 0, 0.15); --color-border-active: rgba(0, 0, 0, 0.30); --color-text: #0a0a0a; --color-text-muted: #666666; --color-text-subtle: #999999; --color-accent: #5a5a64; --color-accent-hover: #3a3a44; --color-glass: rgba(0, 0, 0, 0.02); --color-outline-stroke: #000000; /* Buttons */ --color-btn-bg: #0a0a0a; --color-btn-text: #ffffff; --color-btn-ghost-bg: transparent; --color-btn-ghost-border:rgba(0, 0, 0, 0.10); --color-btn-ghost-text: #666666; /* Nav transparency */ --color-nav-bg: rgba(250, 250, 250, 0.88); --color-nav-border: rgba(0, 0, 0, 0.04); /* Focus ring */ --color-focus: rgba(60, 60, 80, 0.4); /* Progress bar */ --color-progress: linear-gradient(90deg, rgba(100,100,110,0.3), rgba(10,10,10,0.7)); /* Overlay / scrim */ --color-overlay: rgba(250, 250, 250, 0.7); /* Silver shadows — same cool hue, higher opacity for light bg */ --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(120, 120, 135, 0.08); --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.03), 0 8px 32px rgba(120, 120, 135, 0.10); --shadow-elevated: 0 4px 8px rgba(0, 0, 0, 0.04), 0 24px 64px rgba(120, 120, 135, 0.14); --shadow-float: 0 4px 12px rgba(0, 0, 0, 0.05), 0 40px 100px rgba(120, 120, 135, 0.12); --shadow-glow: 0 0 0 1px rgba(120, 120, 135, 0.08), 0 0 40px rgba(120, 120, 135, 0.10); --shadow-toggle: 0 2px 8px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.06); }