/* ============================================================ IC — Design Tokens Derived from chehab.tech v2 brief §7 ============================================================ */ :root { /* Color — Dark (primary) */ --bg: #07111F; --bg-elevated: #0D1B2A; --bg-deep: #050B14; --bg-subtle: #0F1E30; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --fg: #F8FAFC; --fg-muted: #B6C2D1; --fg-subtle: #7C8CA1; --accent: #2EA8FF; --accent-strong: #2563FF; --accent-ai: #7C5CFF; --accent-silver: #C9D2DE; --accent-subtle: rgba(46, 168, 255, 0.10); --accent-ai-subtle: rgba(124, 92, 255, 0.10); --success: #10B981; --warning: #F59E0B; --danger: #EF4444; /* Gradients */ --grad-primary: linear-gradient(135deg, #2EA8FF 0%, #2563FF 60%, #7C5CFF 100%); --grad-text: linear-gradient(120deg, #2EA8FF 0%, #7C5CFF 100%); --grad-hero-glow: radial-gradient(60% 50% at 50% 0%, rgba(46, 168, 255, 0.18), transparent 70%); --grad-ai-glow: radial-gradient(50% 70% at 70% 50%, rgba(124, 92, 255, 0.18), transparent 70%); /* Typography */ --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Spacing (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 192px; /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 9999px; /* Elevation */ --el-1: inset 0 0 0 1px var(--border); --el-2: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 0 0 1px var(--border); --el-3: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px var(--border); --el-glow: 0 0 40px rgba(46, 168, 255, 0.18); --el-glow-ai: 0 0 60px rgba(124, 92, 255, 0.20); /* Motion */ --d-fast: 150ms; --d-base: 240ms; --d-slow: 400ms; --d-slower: 700ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.5, 1.25, 0.75, 1.25); /* Layout */ --container: 1200px; --pad-inline: clamp(24px, 5vw, 72px); /* Section surface tokens — flip with theme */ --section-light-bg: #F4F6FA; --section-light-fg: #0B1220; --section-light-fg-muted: #475569; --section-light-bg-elevated: #FFFFFF; /* Type scale (px) */ --t-display-2xl: clamp(44px, 7.5vw, 80px); --t-display-xl: clamp(40px, 5.6vw, 64px); --t-display-l: clamp(36px, 4.4vw, 52px); --t-display-m: clamp(30px, 3.4vw, 42px); --t-h1: clamp(26px, 2.6vw, 32px); --t-h2: 28px; --t-h3: 22px; --t-h4: 18px; --t-body-l: 19px; --t-body: 17px; --t-body-s: 15px; --t-caption: 13px; } /* ============================================================ Light theme overrides — applied to Mirrors brief §7.1 light palette. ============================================================ */ [data-theme="light"] { --bg: #F8FAFC; --bg-elevated: #FFFFFF; --bg-deep: #EEF2F7; --bg-subtle: #EEF2F7; --border: #DCE3EC; --border-strong: #C2CCD9; --fg: #0B1220; --fg-muted: #475569; --fg-subtle: #7C8CA1; --accent: #2563FF; --accent-strong: #1D4ED8; --accent-ai: #6D49F5; --accent-silver: #94A3B8; --accent-subtle: rgba(37, 99, 255, 0.08); --accent-ai-subtle: rgba(109, 73, 245, 0.08); --grad-primary: linear-gradient(135deg, #2563FF 0%, #1D4ED8 60%, #6D49F5 100%); --grad-text: linear-gradient(120deg, #2563FF 0%, #6D49F5 100%); --grad-hero-glow: radial-gradient(60% 50% at 50% 0%, rgba(37, 99, 255, 0.10), transparent 70%); --grad-ai-glow: radial-gradient(50% 70% at 70% 50%, rgba(109, 73, 245, 0.10), transparent 70%); --el-1: inset 0 0 0 1px var(--border); --el-2: 0 1px 2px rgba(11, 18, 32, 0.05), inset 0 0 0 1px var(--border); --el-3: 0 10px 40px rgba(11, 18, 32, 0.12), inset 0 0 0 1px var(--border); --el-glow: 0 0 40px rgba(37, 99, 255, 0.10); --el-glow-ai: 0 0 60px rgba(109, 73, 245, 0.12); /* Flip section surface tokens — the alternating strip pattern now uses elevated white for "light" sections and the off-white page bg for the others. */ --section-light-bg: #FFFFFF; --section-light-fg: #0B1220; --section-light-fg-muted: #475569; --section-light-bg-elevated: #F8FAFC; }