/* * ============================================================ * BREW GOOD — DESIGN TOKENS * styles/tokens.css * ============================================================ * * HOW TO REBRAND THIS SITE * ──────────────────────── * Edit ONLY the values under "Brand palette" below. * Every colour, font, and spacing decision in every other * CSS file references these custom properties — changing * them here propagates instantly site-wide. * * Quick checklist when rebranding: * 1. Swap the 8 hex values in "Brand palette" * 2. Update --font-display / --font-body / --font-mono * and adjust the Google Fonts URL in * 3. Adjust --color-bg / --color-text if your new palette * flips light/dark defaults * 4. Done. Everything else inherits automatically. * ============================================================ */ :root { /* ── Brand palette ────────────────────────────────────── The only hex values in the entire codebase. Change these to rebrand. */ --color-cream: #FAF1E0; --color-cream-deep: #F4E9D2; --color-cobalt: #2A4FB8; --color-cobalt-deep: #1F3A8A; --color-midnight: #1A2336; --color-yellow: #F5C95C; --color-sage: #B5C4AB; --color-coral: #E8794D; /* ── Semantic roles ───────────────────────────────────── Map palette colours to intent. Swap these (not the palette) for a dark-mode variant. */ --color-bg: var(--color-cream); --color-text: var(--color-midnight); --color-text-inv: var(--color-cream); --color-accent: var(--color-yellow); --color-error: var(--color-coral); /* ── Border / divider alphas ────────────────────────────*/ --color-line: rgba(26, 35, 54, 0.12); --color-line-subtle: rgba(26, 35, 54, 0.06); --color-line-inv: rgba(250, 241, 224, 0.18); --color-line-inv-subtle: rgba(250, 241, 224, 0.06); /* ── Form element alphas (on dark/cobalt backgrounds) ── */ --color-input-bg: rgba(250, 241, 224, 0.08); --color-input-placeholder: rgba(250, 241, 224, 0.50); /* ── Typography ─────────────────────────────────────────*/ --font-display: "Funnel Display", "Funnel Sans", -apple-system, sans-serif; --font-body: "Funnel Sans", "Funnel Display", -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type scale */ --text-xs: 11px; /* mono labels, eyebrows */ --text-sm: 13px; /* nav CTA, small UI */ --text-base: 15px; /* form inputs, small body */ --text-md: 18px; /* ingredient names, glyphs */ --text-lg: 21px; /* hero description */ --text-xl: 24px; /* card titles */ --text-2xl: 28px; /* hero CTA button */ --text-3xl: 56px; /* footer logo */ /* Fluid display headings use clamp() in components.css */ /* Line heights */ --leading-display: 0.92; --leading-tight: 1.05; --leading-snug: 1.25; --leading-normal: 1.45; --leading-relaxed: 1.55; --leading-loose: 1.60; /* Font weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ── Spacing scale (base-8) ─────────────────────────────*/ --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: 112px; --space-12: 128px; /* ── Border radii ───────────────────────────────────────*/ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 999px; --radius-round: 50%; /* ── Shadows ────────────────────────────────────────────*/ --shadow-btn: 0 8px 0 rgba(0, 0, 0, 0.18), 0 16px 40px rgba(0, 0, 0, 0.25); --shadow-btn-hover: 0 10px 0 rgba(0, 0, 0, 0.18), 0 20px 44px rgba(0, 0, 0, 0.28); /* ── Transitions ────────────────────────────────────────*/ --transition-fast: 0.10s; --transition-normal: 0.15s; /* ── Layout ─────────────────────────────────────────────*/ --page-max-width: 1280px; --page-padding: 64px; /* overridden at breakpoints in base.css */ }