/* ============================================================ tokens.css — Design tokens & palettes Change palette by setting [data-palette="..."] on . ============================================================ */ :root { /* Default: Cream (more white, v2) */ --bg: #faf7f1; --bg-2: #f3ede1; --ink: #1a1d1a; --ink-soft: #2d3e2c; --muted: #7a7468; --line: #e7ddca; --card: #ffffff; --accent: #c5512a; /* terracota */ --accent-2: #2d3e2c; /* bosque */ --accent-3: #d99a4e; /* miel */ --hi: #ffd6a8; } [data-palette="dusk"] { --bg: #0e1116; --bg-2: #161a22; --ink: #f3ece0; --ink-soft: #c9bfae; --muted: #8c8579; --line: #2a2f38; --card: #181c25; --accent: #ff8b5e; --accent-2: #b4d8a8; --accent-3: #ffd66b; --hi: #4a3a2f; } [data-palette="lilac"] { --bg: #efeaf6; --bg-2: #e3d9ee; --ink: #1c1730; --ink-soft: #3b2f55; --muted: #6c6388; --line: #cabfde; --card: #faf7ff; --accent: #6a4cff; --accent-2: #ff6f91; --accent-3: #ffcb6b; --hi: #e0d4ff; } [data-palette="sand"] { --bg: #ecdfc9; --bg-2: #e0d0b3; --ink: #1f1a12; --ink-soft: #463826; --muted: #7a6b53; --line: #c9b797; --card: #f7eedc; --accent: #b8421b; --accent-2: #4d5b28; --accent-3: #e0a64a; --hi: #f3d59a; } /* Type scale (clamps fluid) */ :root { --fs-h1: clamp(56px, 9vw, 148px); --fs-h2: clamp(40px, 6vw, 84px); --fs-h3: clamp(24px, 2.6vw, 36px); --fs-body: 16px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --shadow-card: 0 30px 60px -35px color-mix(in oklab, var(--ink) 25%, transparent); --space-section: 160px; --space-section-sm: 96px; --max-w: 1280px; }