/* ========================================================================== Apricotter design tokens — CSS custom properties, flattened. Single-file view of design-system/tokens/*.css. Use THIS file to retrofit the existing site; use tokens/ if you want the split-by-concern source. Two themes. Light is the default in :root; add data-theme="dark" to for the dark ground. Only the semantic layer is overridden — primitives and component tokens are declared once. Drop-in: load BEFORE style.css. The legacy block at the bottom re-declares every custom property style.css and offer.css already use, pointing each at its token, so nothing in the existing CSS has to change on day one. Delete the :root block at the top of style.css when you adopt this file, then retire the legacy aliases one rule at a time. NOTE: the legacy aliases resolve to the LIGHT palette. A page not yet moved onto semantic names needs data-theme="dark" to look as it did before. ========================================================================== */ :root { /* --- color: light primitives (paper) --------------------------------- */ --color-paper-page: #f5eee1; --color-paper-raised: #fffdf8; --color-paper-ink: #2e1c0d; --color-paper-ink-muted: #7d6549; --color-paper-border: #ddcdb4; --color-paper-border-strong: #bfa584; --color-paper-hover: #ece0cc; --color-paper-mark: #c2650b; /* marks go darker on paper, not lighter */ /* --- color: ramp (coffee) --------------------------------------------- */ /* One hue path, 65 to 73, drifting warmer as it lightens the way real pigment does. The previous ramp spanned 31 degrees with no pattern because it was sampled off the hero photograph: page sat at hue 49 and warm at 53, both carrying red the palette never chose, while two retuned steps sat at 66-71. Neighbouring surfaces disagreed, which is what read as burgundy. Chroma peaks at mid (0.034) and tapers both ways. The old peak was ramp.light at 0.091 — more saturated than any other step, at the light end, which is the textbook cause of a warm palette reading dirty. Lightness is held at the previous values so no tuned contrast pairing moves, with two deliberate exceptions: warm 41.8% -> 50% it sat 4 points from mid and separated only by chroma, so flattening the chroma would have collapsed border-strong into border-subtle. light 62.4% -> 68% muted text on a raised surface measured 3.75:1 on the old ramp, under AA. A pre-existing failure the hue fix did not cause and should not preserve. Now 4.73:1. */ --color-ramp-page: oklch(17.7% 0.012 65); --color-ramp-deep: oklch(30% 0.022 67); --color-ramp-mid: oklch(38% 0.034 68); --color-ramp-warm: oklch(50% 0.031 70); --color-ramp-light: oklch(68% 0.026 71); --color-ramp-cream: oklch(96.8% 0.008 73); --color-ramp-accent: #ff9a2e; /* hi-vis CTA orange; measures hue 62 */ --color-ramp-accent-hover: #ffad4f; --color-ramp-ink: #120b05; /* text on hi-vis fills */ /* --- primitives: status (theme-independent declarations) -------------- */ /* Two, not three. A warning amber distinct enough to read as a warning is close enough to the accent (hue 62) to be mistaken for a button, and --color-mark-accent already carries "look at this" everywhere else. Success leaves the warm family on purpose: a warm green is olive, and a success signal has to be unmistakable. Chroma stays low (0.10/0.12) so it never out-shouts the CTA, which is the only colour allowed to be loudest. Danger is hue 25, and that number is the decision. Above ~40 a red becomes a hotter accent rather than a stop signal. 40 degrees of separation is what keeps it from reading as a button. Ratios are measured against surface.RAISED. These also sit on surface.page, so light-mode numbers drop slightly there and dark-mode numbers rise. */ --color-status-success: oklch(46% 0.10 148); /* 6.7:1 on raised paper */ --color-status-success-dark: oklch(72% 0.12 148); /* 5.8:1 on raised ramp */ --color-status-danger: oklch(48% 0.17 25); /* 7.0:1 on raised paper */ --color-status-danger-dark: oklch(74% 0.16 25); /* 5.5:1 on raised ramp; raised from L70, which measured 4.8:1 — AA and no headroom */ /* --- color: semantic (light) ----------------------------------------- */ --color-surface-page: var(--color-paper-page); --color-surface-raised: var(--color-paper-raised); --color-surface-field: var(--color-paper-raised); --color-surface-hover: var(--color-paper-hover); --color-text-primary: var(--color-paper-ink); --color-text-muted: var(--color-paper-ink-muted); --color-text-on-accent: var(--color-ramp-ink); --color-border-subtle: var(--color-paper-border); --color-border-strong: var(--color-paper-border-strong); --color-interactive-accent: var(--color-ramp-accent); --color-interactive-accent-hover: var(--color-ramp-accent-hover); --color-mark-accent: var(--color-paper-mark); /* static; bullets, step numerals, price */ --color-focus-ring: var(--color-paper-ink); --color-focus-ring-field: var(--color-paper-border-strong); --color-scrim-hero: 27 13 6; --color-success: var(--color-status-success); --color-danger: var(--color-status-danger); /* --- type ------------------------------------------------------------ */ --font-serif: 'Bitter', 'Rockwell', 'Roboto Slab', 'Georgia', 'Cambria', serif; --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --size-100: 0.85rem; --size-200: 0.95rem; --size-300: 1rem; --size-400: 1.0625rem; --size-500: 1.125rem; --size-600: 1.5rem; --size-700: 2rem; --size-800: 1.85rem; --size-hero: clamp(2rem, 1.25rem + 1.55vw, 3rem); --size-hero-compact: clamp(1.85rem, 5vw, 2.5rem); --size-hero-pitch: clamp(1.0625rem, 0.95rem + 0.3vw, 1.25rem); --line-height-tight: 1.1; --line-height-snug: 1.25; --line-height-heading: 1.4; --line-height-ui: 1.5; --line-height-body: 1.6; --line-height-prose: 1.7; --letter-spacing-tight: -0.015em; --letter-spacing-heading: -0.01em; /* --- space, geometry ------------------------------------------------- */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --space-8: 64px; --radius-default: 5px; --radius-pill: 50%; --border-width-hairline: 1px; --border-width-rule: 3px; --shadow-card: 0 10px 28px rgb(78 50 20 / 0.10); --shadow-cta-halo: 0 4px 14px rgb(190 95 10 / 0.30); --shadow-cta-halo-hover: 0 3px 10px rgb(190 95 10 / 0.42); --shadow-nav-current: inset 0 1px 0 rgb(255 255 255 / 0.6); --duration-fast: 200ms; --easing-standard: ease; /* --- layout ---------------------------------------------------------- */ --measure: 68ch; --column: 760px; --column-wide: 1080px; --column-wide-inset: clamp(20px, 4vw, 40px); --column-legal: 42rem; --hero-inset: clamp(24px, 3.5vw, 56px); --hero-gutter: 20px; --hero-panel-edge: 35vw; --hero-aspect: 2.294; --hit-target: 48px; /* --- component ------------------------------------------------------- */ --button-primary-background: var(--color-interactive-accent); --button-primary-background-hover: var(--color-interactive-accent-hover); --button-primary-text: var(--color-text-on-accent); --button-primary-padding-block: 0.85rem; --button-primary-padding-inline: 2.5rem; --button-primary-opacity-disabled: 0.45; --button-primary-shadow: var(--shadow-cta-halo); --button-primary-shadow-hover: var(--shadow-cta-halo-hover); --card-background: var(--color-surface-raised); --card-border: var(--color-border-subtle); --card-padding: var(--space-5); --card-padding-compact: var(--space-3); --card-gap: var(--space-3); --card-shadow: var(--shadow-card); --field-background: var(--color-surface-field); --field-border: var(--color-border-subtle); --field-border-hover: var(--color-border-strong); --field-border-focus: var(--color-focus-ring-field); --field-padding-block: 0.75rem; --field-padding-inline: 1rem; --nav-item-padding-block: 0.45rem; --nav-item-padding-inline: 0.9rem; --step-marker-size: 2rem; --step-marker-text: var(--color-mark-accent); --price-tag-text: var(--color-mark-accent); --price-tag-padding-block: 0.35rem; --price-tag-padding-inline: 1rem; --list-bullet-color: var(--color-mark-accent); --list-bullet-size: 0.5rem; --theme-toggle-size: 40px; --theme-toggle-background: var(--color-surface-raised); --theme-toggle-border: var(--color-border-subtle); --theme-toggle-icon: var(--color-text-primary); --theme-toggle-duration-icon: 420ms; --theme-toggle-duration-orbit: 700ms; --theme-toggle-easing-orbit: cubic-bezier(0.42, 1.12, 0.34, 1); --focus-ring-width: 2px; --focus-ring-offset: 3px; --focus-ring-offset-field: 2px; /* --- legacy aliases (retire as call sites move to tokens) ------------ */ --page-bg: var(--color-surface-page); --deep-surface: var(--color-surface-raised); --mid-surface: var(--color-border-subtle); --warm-mid: var(--color-border-strong); --light-warm: var(--color-text-muted); --cream: var(--color-text-primary); --accent: var(--color-interactive-accent); --radius: var(--radius-default); } /* ========================================================================== Dark theme. Semantic layer only — primitives and component tokens above are untouched, so a new component needs no dark-mode work. ========================================================================== */ [data-theme="dark"] { --color-surface-page: var(--color-ramp-page); --color-surface-raised: var(--color-ramp-deep); --color-surface-field: var(--color-ramp-page); --color-surface-hover: var(--color-ramp-mid); --color-text-primary: var(--color-ramp-cream); --color-text-muted: var(--color-ramp-light); --color-border-subtle: var(--color-ramp-mid); --color-border-strong: var(--color-ramp-warm); --color-mark-accent: var(--color-ramp-accent-hover); --color-focus-ring: var(--color-ramp-cream); --color-focus-ring-field: var(--color-ramp-light); --color-success: var(--color-status-success-dark); --color-danger: var(--color-status-danger-dark); --shadow-card: 0 16px 40px rgb(0 0 0 / 0.4); --shadow-cta-halo: 0 6px 22px rgb(255 154 46 / 0.28), 0 0 0 3px rgb(255 154 46 / 0.12); --shadow-cta-halo-hover: 0 4px 14px rgb(255 173 79 / 0.4), 0 0 0 4px rgb(255 173 79 / 0.2); --shadow-nav-current: inset 0 1px 0 rgb(255 255 255 / 0.08); }