/* Vector-AI — design tokens */ @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* Color — institutional dark navy w/ teal accent */ --color-bg: #0A1024; --color-bg-raise: #0E152D; /* slightly lifted surface */ --color-bg-sunk: #070C1C; /* recessed surface */ --color-accent: #4FE8C8; --color-accent-2: #6FF1D8; --color-text: #E8EDF6; --color-text-mute: #8B95A9; --color-text-dim: #5C6680; --color-border: #1F2640; --color-border-strong: #2C355A; /* Status colors (for pills) */ --color-pilot-bg: color-mix(in oklch, #4FE8C8 14%, #0A1024); --color-pilot-fg: #6FF1D8; --color-pilot-bd: color-mix(in oklch, #4FE8C8 35%, #0A1024); /* Type */ --font-display: "Fraunces", "Times New Roman", Georgia, serif; --font-body: "Inter Tight", system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace; /* Type scale (modular, 1.25 minor third for body, larger steps for display) */ --fs-mono: 12px; --fs-xs: 13px; --fs-sm: 15px; --fs-base: 17px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 44px; --fs-4xl: 60px; --fs-5xl: 84px; --fs-6xl: 112px; /* Spacing scale (8 base) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --sp-11: 192px; /* Layout */ --content-max: 1520px; --gutter: clamp(24px, 5vw, 80px); /* Borders / radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --hairline: 1px solid var(--color-border); --hairline-strong: 1px solid var(--color-border-strong); /* Motion */ --ease-out: cubic-bezier(0.2, 0.7, 0.15, 1); --ease-in: cubic-bezier(0.7, 0.0, 0.85, 0.4); --dur-1: 180ms; --dur-2: 320ms; --dur-3: 600ms; } /* Density tweak hook — toggled by tweaks panel via [data-density] on */ body[data-density="cozy"] { --sp-7: 40px; --sp-8: 56px; --sp-9: 80px; --sp-10: 104px; } body[data-density="airy"] { --sp-7: 56px; --sp-8: 80px; --sp-9: 120px; --sp-10: 160px; } /* Accent swap tweak hook */ body[data-accent="cyan"] { --color-accent: #6FF1D8; --color-accent-2: #4FE8C8; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }