/* Public design tokens, compiled from the maintained 32P design system. */
:root { --display: "DM Serif Display", Georgia, serif; --sans: "Plus Jakarta Sans", system-ui, sans-serif; --mono: "Plus Jakarta Sans", system-ui, sans-serif; --font-display: var(--display); --font-body: var(--sans); --font-mono: var(--mono); }
:root { --accent: #C41E3A; --accent-deep: #A3182F; --accent-soft: rgba(196, 30, 58, 0.10); --bg: #F5F5F3; --bg-2: #EFEEEA; --warm: #E8DED1; --card: #FFFFFF; --ink: #0F0F0F; --ink-2: #4A4A48; --ink-3: #646464; --line: rgba(15, 15, 15, 0.10); --line-strong: rgba(15, 15, 15, 0.22); --wood: #B08552; --text-strong: var(--ink); --text-body: var(--ink-2); --text-muted: var(--ink-3); --surface-page: var(--bg); --surface-alt: var(--bg-2); --surface-card: var(--card); --border-hairline: var(--line); --border-strong: var(--line-strong); --accent-terracota: #9A3324; --accent-grafito: #2B2B2B; --accent-bosque: #3E5C4B; } [data-vibe="dark"] { --bg: #0F0F0F; --bg-2: #1A1A1A; --warm: #2A2A2A; --ink: #F5F5F3; --ink-2: #C9C7C1; --ink-3: #8A8A88; --line: rgba(245, 245, 243, 0.12); --line-strong: rgba(245, 245, 243, 0.24); --card: #1A1A1A; --accent: #FF6680; --accent-deep: #C41E3A; --accent-soft: rgba(216, 52, 79, 0.16); }
:root { --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --text-base: 17px; --leading-body: 1.6; --fs-hero: clamp(36px, 6vw, 76px) ; --fs-h1: clamp(34px, 5.5vw, 70px) ; --fs-h2: clamp(28px, 4vw, 50px) ; --fs-h3: clamp(22px, 2.6vw, 32px) ; --fs-h4: 19px; --fs-lead: clamp(16px, 1.4vw, 19px) ; --fs-small: 15px; --fs-eyebrow: 12px; --tracking-display: -0.02em; --tracking-eyebrow: 0.18em; --tracking-meta: 0.06em; }
:root { --r: 4px; --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 100px; --maxw: 1240px; --gutter: clamp(20px, 5vw, 72px) ; --section-y: clamp(64px, 9vw, 140px) ; --section-y-tight: clamp(56px, 8vw, 120px) ; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 30px; --sp-7: 44px; --sp-8: 64px; --shadow-card: 0 16px 36px rgba(0, 0, 0, 0.06); --shadow-card-hover: 0 22px 50px rgba(0, 0, 0, 0.08); --shadow-pop: 0 18px 40px rgba(0, 0, 0, 0.22); }