/* ============================================================ tokens.css — the ONLY file in this project allowed to hold a colour literal. Everything else references these variables. The element carries data-brand="hd" (Heartland Designs, light) or data-brand="gc" (Got Clocks, dark). The shell template sets it; nothing detects it at runtime, and neither site follows the operating system's dark mode — each brand commits to its own single theme. ============================================================ */ :root { /* ---- Shared brand constants (straight off the logo) ---- */ --gold: #C9A24B; /* actions, buttons */ --gold-bright: #D6B663; /* brand mark, dark-ground accent (exact logo gold) */ --gold-deep: #A8823A; /* accent text on light ground */ --brand-gray: #737373; /* exact logo gray */ /* ---- Type ---- */ --font-display: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif; --font-body: "Avenir Next", "Segoe UI", system-ui, sans-serif; --text-small: 13.5px; --text-body: 16px; --text-h3: 18px; --text-h2: 24px; --text-h1: 32px; /* ---- Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 ---- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; /* ---- Layout ---- */ --measure: 1100px; --gutter: 20px; --radius: 10px; --radius-sm: 6px; --tap: 44px; /* minimum tap target */ /* ---- Photo matte: same on both brands ---- Product photos are shot/cropped against a light backdrop, and gear (tripods, cases) is often black — on gc's dark --surface both the photo's own background and the hardware in it disappear into the page. Every container that frames a real photo (not an icon, not a text card) uses this pair instead of --surface/--line so the photo always sits on the same light card regardless of brand. */ --media-bg: #FFFFFF; --media-line: #ECE7DA; --media-ink: #221F17; --media-muted: #6B6552; --media-accent: #856726; } @media (min-width: 768px) { :root { --text-h3: 20px; --text-h2: 30px; --text-h1: 44px; } } @media (min-width: 1100px) { :root { --gutter: 48px; } } /* ---- Heartland Designs — the light face ---- */ [data-brand="hd"] { --ground: #FDFCF9; --surface: #FFFFFF; --band: #F5F1E6; --ink: #221F17; --muted: #6B6552; --line: #ECE7DA; --accent: var(--gold-deep); --btn-bg: var(--gold); --btn-ink: #221C0E; /* --accent is 3.46:1 on --ground: fine for rules and large display type, short of WCAG AA for the small accent text (eyebrows, ghost-button labels, card links). --accent-strong is the same gold taken dark enough to clear 4.5:1 on ground, surface and band. */ --accent-strong: #856726; --focus: #1B5FBF; --error: #B3261E; --shadow: 0 6px 24px rgba(34, 31, 23, 0.08); --overlay: rgba(34, 31, 23, 0.04); /* The cross-brand strip is a piece of gotclocks.com living on an hd page, so it keeps the dark palette wherever it appears. */ --strip-ground: #12100C; --strip-ink: #EDE8DA; --strip-accent: var(--gold-bright); } /* ---- Got Clocks — the dark face ---- */ [data-brand="gc"] { --ground: #0F0E0B; --surface: #17150F; --band: #131109; --ink: #EDE8DA; --muted: #97906F; --line: #2B2718; --accent: var(--gold-bright); --btn-bg: var(--gold-bright); --btn-ink: #221C0E; /* Already 9.86:1 on the dark ground — nothing to strengthen. */ --accent-strong: var(--gold-bright); --focus: #9CC4FF; --error: #F2B8B5; --shadow: 0 6px 24px rgba(0, 0, 0, 0.45); --overlay: rgba(237, 232, 218, 0.05); --strip-ground: #12100C; --strip-ink: #EDE8DA; --strip-accent: var(--gold-bright); }