/* ========================================================================== COOK'ART DESIGN SYSTEM — single source of truth ========================================================================== Identity: warm culinary editorial + premium modern ecommerce + technical credibility. Every value below has a JOB. Nothing here is decoration. Loaded first on the homepage and the product landing page; home.css and shop-landing.css consume these and must not redefine them. ========================================================================== */ :root { /* ── GROUND ─────────────────────────────────────────────────────────────── One neutral for the whole site. The warmth comes from a trace of the BRAND's own hue (30, the red family), not from tinting toward yellow — a yellow-tinted near-white is the saturated "cream / sand / parchment" default and reads as generic. Chroma is deliberately 0.004: felt, not seen. Replaces the split identity where the homepage rendered pure white while every other page rendered a hardcoded #F8F5F0. */ --ivory: oklch(0.982 0.004 30); /* page ground */ --ivory-2: oklch(0.963 0.005 30); /* recessed / alternating surface */ --surface: oklch(0.998 0.001 30); /* raised surface, product tile */ /* ── INK ────────────────────────────────────────────────────────────────── Warm near-black — espresso rather than pure grey, so type sits in the same temperature family as the ground. */ --ink: oklch(0.195 0.014 32); /* headings, primary text */ --ink-2: oklch(0.330 0.011 32); /* body copy */ --ink-3: oklch(0.470 0.008 32); /* metadata — 4.6:1 on ivory */ --espresso: oklch(0.165 0.018 34); /* editorial dark ground */ /* ── LINES ────────────────────────────────────────────────────────────── */ --line: oklch(0.895 0.005 30); --line-soft: oklch(0.935 0.004 30); --line-dark: oklch(0.985 0 0 / 0.13); /* ── ON DARK ──────────────────────────────────────────────────────────── */ --on-dark: oklch(0.985 0.002 30); --on-dark-2: oklch(0.790 0.006 30); /* 7.6:1 on --espresso */ /* ── ACCENT — Cook'Art red, RATIONED ────────────────────────────────────── The audit found red doing 16 different jobs simultaneously: prices, buttons, section grounds, every underline, icons, chevrons, links, hover borders, numerals, stock flags. That is precisely why it read as noise rather than emphasis. Red is now permitted in exactly THREE places: 1. the primary call to action 2. ONE accent per section — never two 3. genuine urgency or saving (low stock, sale price) It is NOT permitted on: standard prices, body links, icons, dividers, section grounds, numerals, or a repeated underline motif. */ --accent: oklch(0.532 0.213 26.5); /* #C8102E */ --accent-lift: oklch(0.575 0.219 28); /* gradient top — 4.88:1 vs white */ --accent-deep: oklch(0.435 0.176 27); --accent-wash: oklch(0.532 0.213 26.5 / 0.07); /* Copper — the second brand colour, taken from the cookware itself. It carries the technical/editorial voice so red does not have to. */ --copper: oklch(0.560 0.088 52); --copper-wash: oklch(0.560 0.088 52 / 0.10); /* --copper is the OBJECT colour (rules, dots, icons). For TEXT it measures 4.30:1 on --ivory-2 — under the 4.5 floor for the 12px technical labels it is used on. --copper-ink is the same hue at the lightness that clears it. */ --copper-ink: oklch(0.455 0.093 50); /* ── TYPE ───────────────────────────────────────────────────────────────── One family: Archivo variable. Width (62–125) and weight (100–900) supply the contrast a display/body pair normally would, without the risk of pairing two similar grotesques. */ --ff: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --t-xs: 0.775rem; /* technical label */ --t-sm: 0.875rem; /* metadata */ --t-base: 1rem; /* body */ --t-lg: clamp(1.06rem, 1.0rem + 0.3vw, 1.22rem); /* lede */ --t-xl: clamp(1.25rem, 1.12rem + 0.65vw, 1.6rem); /* sub-head */ --t-2xl: clamp(1.55rem, 1.3rem + 1.25vw, 2.3rem); /* section head */ --t-3xl: clamp(2rem, 1.55rem + 2.2vw, 3.15rem); /* editorial head */ --t-display: clamp(2.4rem, 1.7rem + 3.4vw, 4.4rem); /* hero only */ --lh-tight: 1.02; --lh-head: 1.1; --lh-body: 1.6; /* ── SPACE ─────────────────────────────────────────────────────────────── */ --gut: clamp(1.15rem, 4.2vw, 2.75rem); --shell: 1320px; --shell-md: 1080px; --shell-sm: 780px; /* reading measure */ --s-1: 0.5rem; --s-2: 0.85rem; --s-3: 1.25rem; --s-4: 2rem; --s-5: 3rem; --s-6: clamp(3.5rem, 7vw, 6rem); /* section rhythm */ --s-7: clamp(5rem, 10vw, 8rem); /* ── Section rhythm ────────────────────────────────────────────────────── --s-6 measured 96px top AND bottom at desktop, so a plain content band spent 192px on nothing. These are the band values now. They are separate tokens rather than a redefinition of --s-6 because the LOCKED HERO consumes --s-4, --s-5 and --s-6; changing those would move it. */ --sec-y: clamp(2.25rem, 4.4vw, 3.75rem); /* 36 → 60px normal band */ --sec-y-lg: clamp(2.75rem, 5.2vw, 4.5rem); /* 44 → 72px feature band */ --sec-head: clamp(1.15rem, 2.2vw, 1.75rem); /* heading → first content */ --grid-gap: clamp(1.1rem, 1.7vw, 1.5rem); /* 18 → 24px card grids */ /* ── Surfaces ──────────────────────────────────────────────────────────── Flat cream on cream on cream read as one long field. Each band now sits on a warm gradient that resolves a little differently, so the eye registers a change of chapter without a hard colour break. */ --grad-light: linear-gradient(180deg, #fffdfb 0%, #fbf5f2 100%); --grad-blush: radial-gradient(circle at 82% 12%, oklch(0.532 0.213 26.5 / 0.055) 0%, transparent 46%), linear-gradient(180deg, #fdfaf8 0%, #f7f0ec 100%); --grad-dark: linear-gradient(135deg, #130b0a 0%, #24100f 100%); /* Warm, not grey. A neutral grey border on a warm ivory ground is the single most reliable way to make a page look unfinished. */ --line-warm: rgba(80, 50, 40, 0.10); --line-warm-2: rgba(80, 50, 40, 0.16); /* Two levels, both warm-toned. */ --sh-card: 0 1px 2px rgba(35, 18, 15, 0.04), 0 8px 28px rgba(35, 18, 15, 0.06); --sh-lift: 0 2px 4px rgba(35, 18, 15, 0.05), 0 14px 36px rgba(35, 18, 15, 0.10); --r-card: 12px; /* chapter break */ /* ── RADIUS — three levels, each with a rule ────────────────────────────── 0 editorial surfaces, full-bleed media, section grounds 8px controls: buttons, inputs, chips, small tiles 16px panels that genuinely float above the page Anything beyond this was cardification for its own sake. */ --r-0: 0; --r-ui: 8px; --r-panel: 16px; --r-pill: 999px; /* chips only */ /* ── DEPTH — four jobs, not one drop shadow reused ──────────────────────── contact the object rests ON the page (product tiles) ambient the object floats slightly (panels) lift interactive hover state rim depth on DARK grounds, where a drop shadow is invisible */ --d-contact: 0 1px 2px oklch(0.195 0.014 32 / 0.06), 0 2px 4px oklch(0.195 0.014 32 / 0.04); --d-ambient: 0 1px 2px oklch(0.195 0.014 32 / 0.05), 0 6px 14px oklch(0.195 0.014 32 / 0.06), 0 18px 40px oklch(0.195 0.014 32 / 0.07); --d-lift: 0 2px 4px oklch(0.195 0.014 32 / 0.07), 0 12px 26px oklch(0.195 0.014 32 / 0.10), 0 32px 64px oklch(0.195 0.014 32 / 0.12); --d-rim: inset 0 1px 0 oklch(0.985 0 0 / 0.09); /* ── MOTION — two curves only. Exponential ease-out, no bounce. ────────── */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --t-fast: 0.18s; --t-med: 0.32s; --t-slow: 0.6s; /* ── HEADER ─────────────────────────────────────────────────────────────── Two heights: resting and compressed. Anchor offsets are derived from these, which is exactly what the old build got wrong — it shipped no scroll-padding-top at all for logged-out visitors, so every in-page anchor landed 77px underneath the fixed header. */ --header-rest: 76px; --header-tight: 60px; /* ── Z-SCALE — semantic, never 9999 ───────────────────────────────────── */ --z-base: 1; --z-rise: 10; --z-sticky: 60; --z-header: 100; --z-overlay: 200; }