/* ============================================================================= tokens.css — DESIGN TOKENS (load this BEFORE style.css) ----------------------------------------------------------------------------- Two layers: 1) PRIMITIVES — the raw scales: palette, spacing, type, motion, radii, shadows. Components must NEVER reference these directly. 2) SEMANTIC — purpose-named tokens mapped to primitives. Components consume ONLY these, so re-theming = overriding semantic tokens. Palette is the earthy-neutral direction — cream, greige, warm taupe, dark coffee, and near-black (plus white). Motion values follow docs/07-motion-and-interaction.md (calm, tokenized scroll motion). Theming: the light theme lives in :root. A future dark theme only needs to override semantic tokens inside [data-theme="dark"] (stub provided below). ========================================================================== */ /* ----------------------------------------------------------------------------- Typography — Gabarito (self-hosted variable font, 400–900). `font-display: swap` shows the system fallback instantly, then swaps to Gabarito once it loads (no blocking, minimal shift). One @font-face covers the whole weight range via the `wght` axis. -------------------------------------------------------------------------- */ @font-face { font-family: "Gabarito"; src: url("/assets/fonts/Gabarito/Gabarito-VariableFont_wght.ttf") format("truetype-variations"), url("/assets/fonts/Gabarito/Gabarito-VariableFont_wght.ttf") format("truetype"); font-weight: 400 900; font-style: normal; font-display: swap; } :root { /* --------------------------------------------------------------------------- 1) PRIMITIVES ------------------------------------------------------------------------ */ /* Neutrals — warm cream → near-black (the earthy base) */ --white: #ffffff; --black: #171614; /* near-black — darkest anchor (used by the dark theme) */ --bg: #e0d9d3; /* cream — page background, lightest anchor */ --surface: #ffffff; /* cards, header */ --surface-2: #ece7e1; /* alternate surface / wash */ --ink-900: #171614; /* text — near-black */ --ink-700: #524639; /* strong secondary text — coffee */ --ink-500: #5f564a; /* muted text — deep taupe */ --line: #d8d0c8; /* borders, dividers */ /* Brand / primary family — dark coffee ("depth / impact") */ --brand-900: #2f2922; /* deepest — hover/contrast */ --brand-700: #524639; /* PRIMARY */ --brand-500: #6f6052; --brand-300: #b9ad9e; /* light — dark-theme primary */ --brand-100: #e6ded6; /* tint / wash */ /* Accent family — warm taupe ("warmth / highlight") */ --accent-700: #4a4034; /* deep — text on light accent washes */ --accent-600: #7c7163; /* accent hover */ --accent-500: #918574; /* ACCENT */ --accent-300: #c4b9aa; /* light — dark-theme accent */ --accent-100: #e8e1d8; /* wash */ --accent-50: #f2ede7; /* softest wash — warm section background */ /* Secondary / muted family — greige */ --muted-600: #6f6458; --muted-500: #9f958a; /* SECONDARY / MUTED */ --muted-100: #e3ddd6; /* light wash */ /* Backward-compat aliases — some older selectors (and the dark theme) still reference the green/gold/clay names; they now resolve to earthy values so re-theming stays a single-file change. */ --green-900: var(--brand-900); --green-700: var(--brand-700); --green-500: var(--brand-500); --green-300: var(--brand-300); --green-100: var(--brand-100); --gold-700: var(--accent-700); --gold-600: var(--accent-600); --gold-500: var(--accent-500); --gold-300: var(--accent-300); --gold-100: var(--accent-100); --gold-50: var(--accent-50); --clay-600: var(--muted-600); --clay-500: var(--muted-500); --clay-100: var(--muted-100); /* Feedback */ --red-100: #fbeae8; --red-300: #e6a9a1; --red-500: #c0392b; --red-700: #8c2b2b; /* Spacing scale (4px base) */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ /* Type family — Gabarito with an instant-rendering system fallback */ --font-sans: "Gabarito", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-serif: Georgia, "Times New Roman", serif; /* Type scale (comfortable mobile-first base ~17px; scale otherwise unchanged) */ --text-xs: 0.8rem; --text-sm: 0.9rem; --text-base: 1.0625rem; /* ~17px — comfortable on phones, ≥16px so iOS won't zoom */ --text-lg: 1.2rem; --text-xl: 1.4rem; --text-2xl: 1.75rem; --text-3xl: 2.2rem; --text-4xl: clamp(2.2rem, 5.5vw, 3.6rem); /* Font weights (Gabarito: Regular 400, Medium 500, SemiBold 600, Bold 700, ExtraBold 800, Black 900). Headings 600/700; hero/display 800–900. */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; --weight-display: 900; /* Line heights */ --leading-tight: 1.12; --leading-base: 1.6; /* Radii */ --radius-0: 0; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; /* Shadows */ --shadow-sm: 0 4px 14px rgba(23, 22, 20, 0.07); --shadow-md: 0 10px 30px rgba(23, 22, 20, 0.10); --shadow-lg: 0 18px 48px rgba(23, 22, 20, 0.16); /* Layout */ --maxw-content: 1080px; --maxw-narrow: 640px; /* --------------------------------------------------------------------------- MOTION TOKENS (docs/07 §2) — components consume these, never raw numbers. ------------------------------------------------------------------------ */ /* Durations */ --motion-instant: 100ms; /* press/active feedback */ --motion-fast: 150ms; /* hover lift, underline, focus, color/shadow */ --motion-base: 320ms; /* default for scroll reveals + most UI transitions */ --motion-slow: 600ms; /* hero headline reveal, large/feature reveals */ --motion-slower: 900ms; /* long ambient moves (globe spin/settle) */ --motion-kenburns: 20s; /* full Ken-Burns zoom cycle */ /* Easing curves */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* default for entrances */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* moves of visible elements */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* exits (rare) */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot, delight only */ --ease-linear: linear; /* ambient/continuous only */ /* Reveal distance / scale / stagger */ --reveal-distance: 24px; /* default fade-up travel */ --reveal-distance-sm: 16px; /* dense groups, heading lines */ --reveal-distance-x: 32px; /* directional (alternating rows) */ --reveal-scale: 0.98; /* scale-in start */ --reveal-blur: 0; /* reserved, off */ --motion-stagger: 80ms; /* default sibling step */ --motion-stagger-sm: 60ms; /* tighter step for longer lists */ --motion-delay-group: 150ms; /* gap when one block follows another */ /* Legacy aliases — existing component CSS uses these; keep them mapped to the new motion tokens so micro-interactions share the same feel. */ --transition-fast: var(--motion-instant) var(--ease-out); --transition-base: var(--motion-fast) var(--ease-out); /* --------------------------------------------------------------------------- 2) SEMANTIC TOKENS (light theme defaults) — components use ONLY these ------------------------------------------------------------------------ */ --color-bg: var(--bg); --color-surface: var(--surface); --color-surface-2: var(--surface-2); --color-text: var(--ink-900); --color-text-muted: var(--ink-500); --color-border: var(--line); --color-primary: var(--brand-700); --color-primary-hover: var(--brand-900); --color-primary-contrast: var(--white); --color-accent: var(--accent-500); --color-accent-hover: var(--accent-600); --color-accent-contrast: var(--ink-900); /* dark text on taupe (AA ~5:1) */ --color-warm: var(--muted-500); /* secondary / muted accent */ --color-warm-hover: var(--muted-600); --color-warm-contrast: var(--ink-900); /* Section "feature band" backgrounds — give the home page visual rhythm. These are SEMANTIC (mapped to primitives here) so components/sections never hard-code hex. Deep coffee + warm taupe bands anchor the page; the soft washes give gentler tonal variety between card sections. Both stops of each band stay dark enough for the white band headings to keep AA. */ --color-feature: var(--brand-900); /* deep coffee band base */ --color-feature-2: var(--brand-700); /* deep coffee band gradient end */ --color-on-feature: var(--white); /* text on the coffee band */ --color-feature-warm: var(--accent-700); /* warm taupe band base */ --color-feature-warm-2: var(--accent-600); /* warm taupe band gradient end */ --color-on-feature-warm: var(--white); /* text on the taupe band */ --color-warm-surface: var(--accent-50); /* soft warm section wash */ --color-warm-border: var(--accent-100); --color-cool-surface: var(--brand-100); /* soft tonal section wash */ --color-tag-bg: var(--muted-100); /* story type tag background */ --color-tag-text: var(--brand-700); /* story type tag text (coffee) */ /* Focus ring: coffee meets AA non-text contrast (≥3:1) on the light cream / white surfaces where almost all focusable elements live. The transparent header overrides this to the accent over the dark hero (see style.css). */ --color-focus-ring: var(--brand-700); --color-success-bg: var(--brand-100); --color-success-border: var(--brand-300); --color-success-text: var(--brand-900); --color-error-bg: var(--red-100); --color-error-border: var(--red-300); --color-error-text: var(--red-700); --color-placeholder-bg: var(--accent-100); --color-placeholder-border: var(--accent-600); --color-placeholder-text: var(--accent-700); /* Semantic spacing aliases (optional convenience) */ --space-gutter: var(--space-5); --space-section: var(--space-8); } /* ----------------------------------------------------------------------------- DARK THEME STUB — future theme = override semantic tokens only. Activate by adding data-theme="dark" to . Values below are a starting point and can be tuned later; no component CSS needs to change. -------------------------------------------------------------------------- */ [data-theme="dark"] { --color-bg: var(--black); --color-surface: #211e1a; --color-surface-2: #2a261f; --color-text: #e8e2da; --color-text-muted: #b3a99c; --color-border: #38332b; --color-primary: var(--brand-300); --color-primary-hover: var(--brand-100); --color-primary-contrast: var(--brand-900); --color-accent: var(--accent-300); --color-accent-hover: var(--accent-100); --color-accent-contrast: #221c12; --color-warm: var(--muted-500); --color-warm-hover: var(--muted-600); --color-warm-contrast: var(--black); /* Feature bands re-tuned for the dark theme (deeper, lower-glare). */ --color-feature: #241d16; --color-feature-2: #382c20; --color-on-feature: #ece6de; --color-feature-warm: #3a3026; --color-feature-warm-2: #534637; --color-on-feature-warm: #efe7dd; --color-warm-surface: #221e18; --color-warm-border: #38332b; --color-cool-surface: #201c16; --color-tag-bg: #332e26; --color-tag-text: var(--accent-300); --color-focus-ring: var(--accent-300); } /* ----------------------------------------------------------------------------- REDUCED MOTION — collapse the motion tokens themselves (docs/07 §2.4). Because components only read tokens, every effect becomes instant with no per-component edits. 1ms (not 0) keeps transitionend/animationend firing so any JS waiting on "reveal complete" still runs. The JS layer ALSO checks prefers-reduced-motion to skip ambient loops, parallax, and Ken-Burns. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --motion-instant: 1ms; --motion-fast: 1ms; --motion-base: 1ms; --motion-slow: 1ms; --motion-slower: 1ms; --motion-kenburns: 1ms; /* Ken-Burns effectively off */ --reveal-distance: 0px; --reveal-distance-sm: 0px; --reveal-distance-x: 0px; --reveal-scale: 1; --motion-stagger: 0ms; --motion-stagger-sm: 0ms; --motion-delay-group: 0ms; --ease-spring: var(--ease-out); /* kill overshoot entirely */ } }