/* Van Peptides, design tokens. Sampled from assets/brand/landing-reference.jpg.
 Do not hardcode colour, type or spacing values anywhere else. */
:root {
 /* ---- colour ---- */
 --cream: #F8EFE1;
 --cream-warm: #F1E9D9;
 --sand: #E4D6BA;
 --oat: #C9B48A;
 --sage: #7C8A6B;
 --sage-mid: #BFB69B;
 --olive: #4E5A3E;
 --terracotta: #CEA27B;
 --amber-vial: #CC9060;
 --ink: #30291F;
 --charcoal: #4A4A44;
 --white: #FFFDF9;

 --rule: rgba(48, 41, 31, 0.14);
 --rule-strong: rgba(48, 41, 31, 0.26);
 --sage-tint: rgba(124, 138, 107, 0.14);
 --oat-tint: rgba(201, 180, 138, 0.28);

 /* ---- type ---- */
 /* Display serif: Playfair Display 400, the high-contrast didone with hairline
 horizontals and ball terminals that matches the reference letterforms. */
 --font-serif: "Playfair Display", "Cormorant Garamond", "DM Serif Display", Georgia, serif;
 --font-sans: "Inter", "Söhne", system-ui, -apple-system, "Segoe UI", sans-serif;
 --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
 /* aliases so section headings (category, howitworks, faq) match the hero display face */
 --font-display: var(--font-serif);
 --font-body: var(--font-sans);

 --track-eyebrow: 0.24em;
 --track-label: 0.18em;
 --track-display: -0.02em;

 --text-xs: 0.75rem;
 --text-sm: 0.875rem;
 --text-base: 1rem;
 --text-lg: 1.125rem;
 --text-xl: 1.375rem;
 --text-2xl: 1.75rem;
 --text-3xl: 2.25rem;
 --text-4xl: 3rem;
 --text-5xl: 3.75rem;
 --text-hero: clamp(2.2rem, 4.2vw, 3.75rem);

 /* ---- space (8px base) ---- */
 --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
 --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
 --s-9: 96px; --s-10: 128px;

 /* ---- radius ---- */
 --r-sm: 4px;
 --r-md: 8px;
 --r-lg: 14px;
 --r-pill: 999px;

 /* ---- shadow ---- */
 --sh-sm: 0 1px 2px rgba(48, 41, 31, 0.06);
 --sh-md: 0 6px 20px rgba(48, 41, 31, 0.07);
 --sh-lg: 0 18px 48px rgba(48, 41, 31, 0.12);

 /* ---- motion ---- */
 --dur-fast: 140ms;
 --dur-base: 220ms;
 --dur-slow: 420ms;
 --dur-cine: 900ms;
 --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
 --ease-in: cubic-bezier(0.4, 0, 1, 1);

 /* ---- layout ---- */
 --max: 1290px;
 --max-header: 1360px;
 --card-bg: #FCF3E7;
 --max-prose: 720px;
 --gutter: 24px;
}