/* ============================================================ OnlyPotsByNina — design tokens (pure custom properties). Palette source of truth: lib/design_palette.rb — the palette sync spec keeps every colour here on that palette. A theme picks its palette via data-variant on ; adding a theme = one new [data-variant="…"] block redefining the colour and shadow tokens below. Element defaults live in base.css, primitives in components.css, feature styles in pages.css. ============================================================ */ :root { /* type */ --font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --font-sans: 'Inter Tight', 'DM Sans', -apple-system, sans-serif; /* scale (fluid) */ --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.86rem); --step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem); --step-1: clamp(1.15rem, 1.10rem + 0.25vw, 1.30rem); --step-2: clamp(1.45rem, 1.38rem + 0.35vw, 1.70rem); --step-3: clamp(1.85rem, 1.75rem + 0.5vw, 2.25rem); --step-4: clamp(2.5rem, 2.3rem + 1vw, 3.25rem); --step-5: clamp(3.5rem, 3.1rem + 2vw, 5.5rem); /* display sizes (page + confirmation heroes, product titles) */ --display-1: clamp(3rem, 7vw, 6rem); --display-2: clamp(2.5rem, 5vw, 4rem); /* space */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; /* radii */ --r-sm: 2px; --r-md: 4px; --r-lg: 10px; --r-pill: 999px; /* motion */ --ease: cubic-bezier(.2,.7,.2,1); --dur-1: 180ms; --dur-2: 320ms; --dur-3: 560ms; --dur-4: 900ms; /* stacking */ --z-header: 40; --z-overlay: 60; --z-panel: 70; --z-modal: 100; --z-flash: 1000; /* clearance under the sticky storefront header */ --header-clear: 88px; } /* ——— Linen (default and only theme; a future one redefines these) ——— */ :root, :root[data-variant="linen"] { --bg: #f7f2e9; /* cream linen */ --bg-alt: #ede4d3; /* warmer cream */ --bg-card: #fdfaf4; --ink: #2b2116; /* deep brown near-black */ --ink-soft: #5c4e3d; --ink-mute: #8a7d6a; --line: #d8cdb8; --accent: #8b6b4a; /* stoneware brown */ --accent-deep:#5a4430; --sage: #8b9b7e; /* Deepened for white-on-colour surfaces — the base tones top out at 2.96:1. */ --terracotta-deep:#a2634f; --sage-deep: #64705b; --danger: #8c2f2f; --white: #ffffff; --scrim: rgba(30, 20, 10, 0.4); --shadow-2: 0 8px 28px rgba(60, 40, 20, 0.08); }