/* ========================================================================== erichunsicker.com — Design Tokens (Editorial lane) · PRODUCTION COPY Single source of truth for color, type, spacing, radius, shadow. Three-layer: PRIMITIVE (raw) -> SEMANTIC (purpose) -> COMPONENT. Grounded in the approved mockups/home-editorial-v2.html comp. Kept in sync with ../../design-tokens.css (the human-readable spec). Last locked: 2026-06-09 · Step-2 refinements added 2026-06-29 (see bottom). ========================================================================== */ :root { /* --------------------------------------------------------------------- LAYER 1 — PRIMITIVES (raw values; never use directly in components) --------------------------------------------------------------------- */ /* Brand green */ --green-700: #1F5A30; /* deep / hover */ --green-600: #2E7D46; /* brand green (the one knob) */ --green-300: #6FCB8C; /* light accent on dark panels */ /* Neutrals */ --ink-900: #16181D; /* near-black text */ --ink-700: #3A3F47; /* soft ink — nav links, footer links, lead paragraphs (Step 2) */ --gray-500: #6B7280; /* muted text */ --gray-400: #9AA39C; /* dimmed partner-logo gray */ --white: #FFFFFF; /* Surfaces */ --panel-green: #F6F8F6; /* light tinted section background */ --green-950: #0F1813; /* dark green panel (cinematic blocks) */ /* On-dark neutrals (text/inputs on the dark green panels) — Step 2 */ --on-dark-muted: #C9D2CB; /* body copy on dark */ --on-dark-label: #9FB3A6; /* eyebrow/stat labels on dark */ --on-dark-input-bg: #16211B; --on-dark-input-border: #2A3A30; --on-dark-placeholder: #8AA093; /* Feedback */ --red-300: #EFA9A0; /* error text on dark panels */ /* Lines */ --line-200: #E6E9E6; /* standard border */ --line-300: #D7DDD8; /* hairline / dividers */ /* Gold accent (in-the-bag / premium cues) */ --gold-400: #E5C97B; --gold-050: #FFF7E6; --gold-800: #7A5B12; --preview-todo: #B8860B; /* gold link = data still needed (preview only) */ /* Placeholder scaffolding (preview only — real photos replace these) */ --ph-from: #DFE7E0; --ph-mid: #C4D3C8; --ph-to: #AEBFB3; --ph-text: #2C4034; /* Poster blocks (photo slots shipped as intentional editorial panels; a real dropped inside covers the poster automatically) */ --poster-from: #263A2E; --poster-mid: #2C4034; --poster-to: #1D2E24; --poster-text: #F2EFE6; --poster-muted: #AEBFB3; /* Fonts */ --font-serif: "Fraunces", Georgia, "Times New Roman", serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* --------------------------------------------------------------------- LAYER 2 — SEMANTIC (what tokens MEAN; use these in layout CSS) --------------------------------------------------------------------- */ /* Color roles */ --color-bg: var(--white); --color-surface: var(--panel-green); --color-surface-dark: var(--green-950); --color-text: var(--ink-900); --color-text-soft: var(--ink-700); /* nav, footer links, lead copy */ --color-text-muted: var(--gray-500); --color-text-on-dark: var(--white); --color-text-on-dark-muted: var(--on-dark-muted); --color-success-on-dark: var(--green-300); --color-error-on-dark: var(--red-300); --color-accent-green: var(--green-300); /* eyebrow/em on dark panels */ --color-text-on-primary: var(--white); --color-primary: var(--green-600); --color-primary-hover: var(--green-700); --color-accent: var(--gold-400); --color-accent-bg: var(--gold-050); --color-accent-text: var(--gold-800); --color-border: var(--line-200); --color-hairline: var(--line-300); /* Typography roles */ --font-heading: var(--font-serif); /* Fraunces */ --font-body: var(--font-sans); /* Inter */ /* Type scale (fluid headings, fixed body) */ --text-display: clamp(2.7rem, 5.4vw, 4.6rem); /* hero */ --text-h1: clamp(2.25rem, 4vw, 3rem); --text-h2: clamp(2rem, 3.8vw, 3rem); --text-h3: 1.5rem; --text-h4: 1.25rem; --text-lead: 1.18rem; /* intro / lead paragraph */ --text-body: 1rem; --text-small: 0.875rem; --text-eyebrow: 0.75rem; /* uppercase label, letter-spaced */ /* Line heights */ --leading-display: 1.04; --leading-heading: 1.1; --leading-body: 1.6; /* Font weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heading: var(--weight-medium); /* matches approved comp (Fraunces 500) */ /* Letter spacing */ --tracking-eyebrow: 0.14em; /* standardized from 4 ad-hoc comp values */ --tracking-tight: -0.012em; /* Spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 64px; --space-10: 80px; --space-11: 96px; /* Section rhythm */ --section-y: var(--space-11); /* desktop vertical padding */ --section-y-mobile: var(--space-9); /* Radius */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --radius-full: 50%; /* Shadow (used sparingly — editorial = mostly flat + hairlines) */ --shadow-sm: 0 1px 2px rgba(22,24,29,0.06); --shadow-md: 0 12px 30px rgba(20,30,22,0.08); /* Layout */ --container-max: 1180px; --container-read: 680px; --container-pad: var(--space-5); /* --------------------------------------------------------------------- LAYER 3 — COMPONENT (per-component, reference semantic only) --------------------------------------------------------------------- */ /* Button (primary) */ --btn-bg: var(--color-primary); --btn-bg-hover: var(--color-primary-hover); --btn-text: var(--color-text-on-primary); --btn-radius: var(--radius-pill); --btn-pad-y: var(--space-3); --btn-pad-x: var(--space-6); --btn-weight: var(--weight-semibold); /* Button (secondary / outline) */ --btn2-bg: var(--color-bg); --btn2-border: var(--color-border); --btn2-text: var(--color-text); /* Card */ --card-bg: var(--color-bg); --card-border: var(--color-border); --card-radius: var(--radius-md); --card-pad: var(--space-6); /* Eyebrow / label */ --eyebrow-color: var(--color-primary); --eyebrow-size: var(--text-eyebrow); --eyebrow-track: var(--tracking-eyebrow); /* Link */ --link-color: var(--color-primary); --link-hover: var(--color-primary-hover); } /* ---------------------------------------------------------------------------- STEP-2 REFINEMENTS (2026-06-29) — what changed vs the 2026-06-09 lock, and why: - Added --ink-700 (soft ink) + the on-dark neutral set: the approved comp visibly relies on these (nav/footer link gray, dark-panel body/labels/inputs) but they weren't tokenized. Completing the set so pages have no raw hex. - --weight-heading = 500 to match the approved comp (the spec table said 600; the comp renders 500 — trusting the approved visual). Reconcile in the doc. - --tracking-eyebrow standardized to 0.14em (comp had .12/.14/.20/.22em). - --leading-display 1.04 / --leading-heading 1.1 to match the comp's tight headings. - --text-lead 1.18rem, --text-h2 clamp widened to match comp hero/section sizes. ---------------------------------------------------------------------------- */