/* ============================================================ * Design tokens — single source of truth. * Both themes live here; swap by setting `data-theme` on . * * Brand mood: not "AI default indigo". * - Primary = deep electric indigo (familiar SaaS feel). * - Accent = warm amber (warmth, lead-gen CTAs, contrast against blue). * - Highlight = cool cyan (secondary chip, "live" pulse, links over warm bg). * Together they form a triad — distinctive vs the typical AI palette. * ============================================================ */ :root { /* Spacing (4-pt grid) */ --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; /* Radii */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; /* Type */ --font-sans: ui-sans-serif, -apple-system, "Segoe UI", "Inter", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-22: 1.375rem; --fs-28: 1.75rem; --fs-36: 2.25rem; --fs-48: 3rem; --lh-tight: 1.15; --lh-normal: 1.55; --lh-loose: 1.7; /* Shadow (light) */ --shadow-sm: 0 1px 2px rgba(15, 18, 30, 0.06); --shadow-md: 0 6px 20px -8px rgba(15, 18, 30, 0.18), 0 2px 8px -2px rgba(15, 18, 30, 0.08); --shadow-lg: 0 24px 50px -16px rgba(15, 18, 30, 0.22), 0 4px 16px -4px rgba(15, 18, 30, 0.12); --shadow-glow: 0 8px 40px -8px color-mix(in srgb, var(--accent) 40%, transparent); /* Motion */ --easing: cubic-bezier(.2,.85,.25,1); --easing-out: cubic-bezier(.16,1,.3,1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; /* Container */ --container: 1200px; --container-sm: 720px; /* Brand palette (raw) */ --indigo-300: #a5b4fc; --indigo-400: #818cf8; --indigo-500: #6366f1; --indigo-600: #4f46e5; --indigo-700: #4338ca; --amber-300: #fcd34d; --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706; --cyan-300: #67e8f9; --cyan-400: #22d3ee; --cyan-500: #06b6d4; --cyan-600: #0891b2; --rose-400: #fb7185; --emerald-500: #10b981; } /* ----------- Light theme (default) ----------- */ :root, :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --bg-elev: #f6f7fb; --bg-card: #ffffff; --bg-input: #ffffff; --bg-muted: #eef0f8; --fg: #0d1020; --fg-strong: #060814; --fg-muted: #4a546b; --fg-faint: #7c8499; --border: #e6e8f0; --border-strong: #c7ccdd; --primary: var(--indigo-600); --primary-fg: #ffffff; --primary-soft: color-mix(in srgb, var(--indigo-500) 12%, transparent); --accent: var(--amber-500); --accent-fg: #221302; --accent-soft: color-mix(in srgb, var(--amber-500) 14%, transparent); --highlight: var(--cyan-500); --highlight-fg:#03161c; --highlight-soft: color-mix(in srgb, var(--cyan-500) 14%, transparent); --link: var(--indigo-700); --success: #15803d; --warning: var(--amber-600); --danger: #dc2626; --hero-grad: radial-gradient(60% 60% at 30% 0%, color-mix(in srgb, var(--indigo-300) 30%, transparent), transparent 60%), radial-gradient(50% 60% at 90% 20%, color-mix(in srgb, var(--cyan-300) 25%, transparent), transparent 60%), radial-gradient(60% 60% at 80% 100%, color-mix(in srgb, var(--amber-300) 30%, transparent), transparent 60%); --grid-line: rgba(13, 16, 32, 0.05); --ring-glow: color-mix(in srgb, var(--primary) 40%, transparent); } /* ----------- Dark theme ----------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #07090f; --bg-elev: #0d1019; --bg-card: #11142210; /* glassy */ --bg-input: #0d1019; --bg-muted: #131726; --fg: #f1f3fa; --fg-strong: #ffffff; --fg-muted: #aab1c4; --fg-faint: #6f7894; --border: #1c2233; --border-strong: #2a3147; --primary: var(--indigo-400); --primary-fg: #07090f; --primary-soft: color-mix(in srgb, var(--indigo-500) 22%, transparent); --accent: var(--amber-400); --accent-fg: #1a1003; --accent-soft: color-mix(in srgb, var(--amber-400) 18%, transparent); --highlight: var(--cyan-400); --highlight-fg:#04121a; --highlight-soft: color-mix(in srgb, var(--cyan-500) 22%, transparent); --link: var(--indigo-300); --success: #4ade80; --warning: var(--amber-400); --danger: #f87171; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 20px -8px rgba(0, 0, 0, 0.6), 0 2px 8px -2px rgba(0, 0, 0, 0.5); --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.7), 0 4px 18px -4px rgba(0, 0, 0, 0.5); --hero-grad: radial-gradient(60% 60% at 30% 0%, color-mix(in srgb, var(--indigo-500) 28%, transparent), transparent 60%), radial-gradient(50% 60% at 90% 20%, color-mix(in srgb, var(--cyan-500) 22%, transparent), transparent 60%), radial-gradient(60% 60% at 80% 100%, color-mix(in srgb, var(--amber-500) 18%, transparent), transparent 60%); --grid-line: rgba(255, 255, 255, 0.04); --ring-glow: color-mix(in srgb, var(--primary) 50%, transparent); } /* Theme is now binary (light | dark). theme.js writes data-theme on from cookie, falling back to prefers-color-scheme on first visit. */