/* ============================================================================ * Vibecreative — Design Tokens (SLIM v2) * Editorial-magazine baseline. Only Fraunces preloaded — Cormorant + JBM * degrade to system serif/mono to save 3× TTFB font-blocking. * ============================================================================ */ /* Only Fraunces (variable) is loaded via preload+swap in . * Cormorant + JetBrains Mono fall back to system serif/monospace. */ :root { color-scheme: light; /* Paper */ --paper: oklch(97.2% 0.008 82); --paper-deeper: oklch(94.5% 0.010 82); --paper-shadow: oklch(91.0% 0.010 82); /* Ink */ --ink: oklch(14.0% 0.015 60); --ink-90: oklch(20.0% 0.015 60); --ink-70: oklch(38.0% 0.010 60); --ink-50: oklch(58.0% 0.008 60); --ink-30: oklch(80.0% 0.005 60); /* Accent */ --accent: oklch(52.0% 0.140 45); --accent-hot: oklch(58.0% 0.170 40); --accent-quiet: oklch(52.0% 0.140 45 / 0.10); /* Grayscale */ --slate-100: oklch(93.0% 0.005 60); --slate-300: oklch(82.0% 0.005 60); --slate-500: oklch(58.0% 0.005 60); --slate-700: oklch(38.0% 0.010 60); --slate-900: oklch(20.0% 0.015 60); /* Hairlines */ --rule: color-mix(in oklch, var(--ink) 12%, transparent); --rule-strong: color-mix(in oklch, var(--ink) 20%, transparent); --rule-faint: color-mix(in oklch, var(--ink) 06%, transparent); /* SIMPLIFIED 2-zone color-shift (down from 6): warm-cream → sienna at 60% */ --stop-warm: oklch(97.2% 0.008 82); /* default */ --stop-sienna: oklch(93.5% 0.014 40); /* after 60% scroll */ /* TYPOGRAPHY — only Fraunces stays first-in-stack; others go system */ --font-display: "Fraunces", "Times New Roman", Georgia, serif; --font-serif: Georgia, "Times New Roman", serif; --font-sans: -apple-system, "Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --scale-ratio: 1.618; --step-0: 1rem; --step-1: calc(var(--step-0) * var(--scale-ratio)); --step-2: calc(var(--step-1) * var(--scale-ratio)); --step-3: calc(var(--step-2) * var(--scale-ratio)); --hero-headline: clamp(84px, 15vw, 220px); --section-headline: clamp(56px, 9vw, 148px); --section-heading: clamp(28px, 3.4vw, 52px); --pull-quote: clamp(28px, 3vw, 56px); --meta-small: 11px; --body-size: 17px; --leading-cover: 0.92; --leading-body: 1.65; /* Rhythm */ --rhythm: 8px; --rhythm-2: 16px; --rhythm-3: 24px; --rhythm-4: 32px; --rhythm-6: 48px; --rhythm-8: 64px; --rhythm-12: 96px; --rhythm-16: 128px; --rhythm-24: 192px; --rhythm-32: 256px; --grid-cols: 12; --grid-gutter: clamp(16px, 2vw, 32px); --grid-margin: clamp(24px, 6vw, 96px); --grid-max: 1440px; --measure-prose: 65ch; /* Motion — reduced set */ --ease-signature: cubic-bezier(0.16, 1, 0.3, 1); --ease-micro: cubic-bezier(0.4, 0, 0.2, 1); --dur-signature: 900ms; --dur-micro: 200ms; /* Z */ --z-nav: 200; --z-grain: 1; --hairline: 1px; } @media (max-width: 1024px) { :root { --grid-cols: 6; --body-size: 16px; --hero-headline: clamp(64px, 14vw, 128px); --section-headline: clamp(42px, 9vw, 92px); } } @media (max-width: 640px) { :root { --grid-cols: 4; --grid-margin: clamp(16px, 5vw, 32px); } } /* View Transitions — native, cheap */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-signature); animation-timing-function: var(--ease-signature); } /* Reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } video[autoplay] { display: none !important; } }