/** * HOLY DOG — DESIGN TOKENS * Single source of truth for colour, type, space, and layout. * * This file declares variables only. No selectors, no rules. * Layout primitives live in base.css; component styles consume these tokens. * * Contrast policy: senior customers are a core audience, so body text and * interactive labels target WCAG AAA (7:1) rather than AA (4.5:1). * Every measured pair is noted inline. Do not introduce a raw hex outside * this file — if a colour is missing, add it here as a token. * * @package HolydogChild * @since 1.6.0 */ :root { /* ══════════════════════════════════════════════════════════ 1. BRAND — blue #2A6DA3 is the brand blue. It passes AA but not AAA, so it is used as a FILL (buttons, panels, icons) and never as small text on light grounds. --hd-brand-700 is the text-and-link variant that clears AAA on both white and cream. ══════════════════════════════════════════════════════════ */ --hd-brand-50: #F0F6FB; /* tint wash, table stripes */ --hd-brand-100: #D9E8F4; /* hover wash, selected rows */ --hd-brand-200: #B3D0E8; /* borders on brand surfaces */ --hd-brand-300: #7FAECF; /* disabled brand fill */ --hd-brand-400: #4A88B6; /* decorative only */ --hd-brand-500: #2A6DA3; /* ◆ BRAND. Fill. White on it = 5.5:1 */ --hd-brand-600: #25608F; /* button hover */ --hd-brand-700: #1D4E77; /* ◆ TEXT + LINKS. 8.7:1 on white, 7.7:1 on cream — AAA both */ --hd-brand-800: #163956; /* pressed state, dark panels */ --hd-brand-900: #10293E; /* deepest — footers, overlays */ /* ══════════════════════════════════════════════════════════ 2. BRAND — cream #FDF2AF is an accent SURFACE only. At 1.14:1 against white it can never carry text. Used for CTA bands, location cards and highlight panels, always with ink-900 on top (14.5:1). ══════════════════════════════════════════════════════════ */ --hd-cream-50: #FFFCEB; /* faintest wash, alternating rows */ --hd-cream-100: #FEF8D4; /* hover on cream surfaces */ --hd-cream-200: #FDF2AF; /* ◆ BRAND CREAM. Section grounds */ --hd-cream-300: #F5E489; /* border against cream-200 */ --hd-cream-400: #E5CF63; /* decorative rules, dividers */ /* ══════════════════════════════════════════════════════════ 3. NEUTRALS — ink Biased slightly cool so they sit with the blue rather than fighting it. A pure grey reads as unconsidered here. ══════════════════════════════════════════════════════════ */ --hd-ink-900: #16202B; /* ◆ BODY + HEADINGS. 16.5:1 white, 14.5:1 cream — AAA both */ --hd-ink-700: #2E3D4F; /* strong secondary. 11.1:1 white */ --hd-ink-600: #405264; /* ◆ SECONDARY TEXT. 8.1:1 — AAA */ --hd-ink-500: #5A6B7E; /* ◆ MUTED. 5.5:1 — AA only. Never for body copy or labels. */ --hd-ink-300: #93A1AF; /* placeholder, disabled text */ --hd-ink-200: #C4CDD6; /* strong borders, dividers */ --hd-ink-100: #E1E7ED; /* ◆ DEFAULT BORDER */ --hd-ink-50: #F2F5F8; /* ◆ SUNKEN SURFACE */ /* ══════════════════════════════════════════════════════════ 4. SURFACES — semantic aliases. Prefer these over raw ramps. ══════════════════════════════════════════════════════════ */ --hd-surface-page: #FFFFFF; /* page ground */ --hd-surface-raised: #FFFFFF; /* cards on sunken */ --hd-surface-sunken: var(--hd-ink-50); /* page bg behind cards */ --hd-surface-accent: var(--hd-cream-200); /* cream CTA bands */ --hd-surface-brand: var(--hd-brand-500); /* blue panels */ --hd-surface-dark: var(--hd-brand-900); /* footer */ /* ══════════════════════════════════════════════════════════ 5. TEXT — semantic aliases ══════════════════════════════════════════════════════════ */ --hd-text-primary: var(--hd-ink-900); --hd-text-secondary: var(--hd-ink-600); --hd-text-muted: var(--hd-ink-500); --hd-text-link: var(--hd-brand-700); --hd-text-on-brand: #FFFFFF; /* on brand-500: 5.5:1 */ --hd-text-on-cream: var(--hd-ink-900); /* on cream-200: 14.5:1 */ --hd-text-on-dark: #FFFFFF; /* ══════════════════════════════════════════════════════════ 6. SEMANTIC — status All chosen dark enough to carry text at AAA on white. ══════════════════════════════════════════════════════════ */ --hd-success: #175C3B; /* in stock, order confirmed 8.0:1 */ --hd-success-bg: #E8F4ED; /* success on this tint 7.1:1 */ --hd-warning: #6B430C; /* replaces the failing gold 8.6:1 */ --hd-warning-bg: #FDF4E3; /* warning on this tint 7.9:1 */ --hd-error: #8F0E15; /* form errors, out of stock 9.4:1 */ --hd-error-bg: #FBEAEB; /* error on this tint 8.1:1 */ --hd-info: var(--hd-brand-700); --hd-info-bg: var(--hd-brand-50); /* ══════════════════════════════════════════════════════════ 7. TYPEFACE M Saans, self-hosted. See fonts.css for the @font-face block. Weights 600 and 652 are the specified brand weights; 400 is required for long-form body copy at readable weight. ══════════════════════════════════════════════════════════ */ --hd-font-sans: "Saans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --hd-font-body: var(--hd-font-sans); --hd-font-display: var(--hd-font-sans); --hd-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --hd-fw-regular: 400; /* body copy */ --hd-fw-medium: 600; /* ◆ specified — UI, buttons */ --hd-fw-bold: 652; /* ◆ specified — headings */ /* ══════════════════════════════════════════════════════════ 8. TYPE SCALE Base is 17px, not 16 — measurably easier for older readers without looking oversized. Ratio ≈ 1.25. Display sizes are fluid so headings never overflow on small screens. ══════════════════════════════════════════════════════════ */ --hd-text-xs: 0.8125rem; /* 13px — captions. Absolute floor. */ --hd-text-sm: 0.9375rem; /* 15px — meta, table cells */ --hd-text-base: 1.0625rem; /* 17px — ◆ BODY */ --hd-text-lg: 1.1875rem; /* 19px — lead paragraphs */ --hd-text-xl: 1.375rem; /* 22px — h4 */ --hd-text-2xl: 1.6875rem; /* 27px — h3 */ --hd-text-3xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.125rem); /* h2 */ --hd-text-4xl: clamp(2.125rem, 1.6rem + 2.4vw, 2.625rem); /* h1 */ --hd-text-5xl: clamp(2.5rem, 1.8rem + 3.4vw, 3.3125rem); /* hero */ --hd-leading-tight: 1.15; /* display */ --hd-leading-snug: 1.3; /* headings */ --hd-leading-normal: 1.6; /* ◆ body — generous on purpose */ --hd-leading-relaxed: 1.75; /* long-form articles */ --hd-tracking-tight: -0.02em; /* large display only */ --hd-tracking-normal: 0; --hd-tracking-wide: 0.08em; /* uppercase labels */ --hd-measure: 65ch; /* ◆ max line length for body */ --hd-measure-narrow: 52ch; /* ══════════════════════════════════════════════════════════ 9. SPACE — 8px base ══════════════════════════════════════════════════════════ */ --hd-space-1: 0.25rem; /* 4px */ --hd-space-2: 0.5rem; /* 8px */ --hd-space-3: 0.75rem; /* 12px */ --hd-space-4: 1rem; /* 16px */ --hd-space-5: 1.5rem; /* 24px */ --hd-space-6: 2rem; /* 32px */ --hd-space-7: 3rem; /* 48px */ --hd-space-8: 4rem; /* 64px */ --hd-space-9: 6rem; /* 96px */ --hd-space-10: 8rem; /* 128px */ /* Vertical rhythm between page sections — replaces the per-widget padding that currently varies section to section. */ --hd-section-y: clamp(3rem, 7vw, 6rem); --hd-section-y-tight: clamp(2rem, 4vw, 3rem); /* ══════════════════════════════════════════════════════════ 10. LAYOUT GRID One container, 12 columns, consistent gutters. Every section snaps to this so left edges align down the whole page. ══════════════════════════════════════════════════════════ */ --hd-container: 1200px; /* ◆ default max width */ --hd-container-wide: 1440px; /* full-bleed media */ --hd-container-narrow: 780px; /* ◆ reading width */ --hd-columns: 12; --hd-gutter: var(--hd-space-5); /* 24px */ --hd-gutter-lg: var(--hd-space-6); /* 32px ≥1024px */ --hd-page-pad: var(--hd-space-4); /* 16px viewport edge */ --hd-page-pad-lg: var(--hd-space-6); /* 32px ≥768px */ /* ══════════════════════════════════════════════════════════ 11. RADIUS — three values, down from eighteen ══════════════════════════════════════════════════════════ */ --hd-radius-input: 8px; --hd-radius-card: 14px; --hd-radius-pill: 999px; /* ══════════════════════════════════════════════════════════ 12. ELEVATION — two levels, down from four ══════════════════════════════════════════════════════════ */ --hd-shadow-resting: 0 1px 2px rgba(22, 32, 43, 0.06), 0 1px 3px rgba(22, 32, 43, 0.08); --hd-shadow-raised: 0 2px 4px rgba(22, 32, 43, 0.06), 0 8px 20px rgba(22, 32, 43, 0.10); /* ══════════════════════════════════════════════════════════ 13. FOCUS Deliberately thick. The audit found 47–60 elements per page with no focus indicator at all; this is the fix. ══════════════════════════════════════════════════════════ */ --hd-focus-width: 3px; --hd-focus-color: var(--hd-brand-700); --hd-focus-offset: 2px; /* Halo for focus on dark or brand-coloured fills */ --hd-focus-halo: 0 0 0 var(--hd-focus-width) #FFFFFF, 0 0 0 calc(var(--hd-focus-width) * 2) var(--hd-brand-700); /* ══════════════════════════════════════════════════════════ 14. CONTROLS 44px minimum touch target — the audit found 18×18 icons. ══════════════════════════════════════════════════════════ */ --hd-touch-min: 44px; --hd-control-h: 48px; /* inputs, buttons — generous */ --hd-control-h-sm: 40px; --hd-border-width: 1px; --hd-border-color: var(--hd-ink-100); /* ══════════════════════════════════════════════════════════ 15. MOTION ══════════════════════════════════════════════════════════ */ --hd-transition-fast: 120ms ease; --hd-transition: 180ms ease; --hd-transition-slow: 280ms ease; /* ══════════════════════════════════════════════════════════ 16. Z-INDEX — named, so nothing needs z-index: 99999 again ══════════════════════════════════════════════════════════ */ --hd-z-base: 1; --hd-z-dropdown: 100; --hd-z-sticky: 200; --hd-z-header: 300; --hd-z-drawer: 400; --hd-z-modal: 500; --hd-z-toast: 600; /* ══════════════════════════════════════════════════════════ 17. LEGACY ALIASES ⚠ DO NOT USE IN NEW CODE product-single.css, my-account.css and style.css reference these 85 times. Mapping them here means those files inherit the new brand without being rewritten, and they can be migrated to the tokens above file by file. ══════════════════════════════════════════════════════════ */ --hd-blue: var(--hd-brand-500); --hd-blue-dk: var(--hd-brand-600); --hd-blue-dkr: var(--hd-brand-700); --hd-ink: var(--hd-ink-900); --hd-muted: var(--hd-ink-500); --hd-line: var(--hd-ink-100); --hd-bg: var(--hd-ink-50); --hd-card: var(--hd-surface-raised); /* Retires the rogue forest green (#1A3228) from the account pages — a third brand colour that was never briefed. */ --hd-forest: var(--hd-brand-800); --hd-forest-dk: var(--hd-brand-900); --hd-forest-tint: var(--hd-brand-50); --hd-stat-bg: var(--hd-brand-50); /* Admin notice stripe → semantic warning */ --hd-admin-stripe: var(--hd-warning-bg); --hd-admin-border: var(--hd-warning); --hd-admin-text: var(--hd-warning); /* 16/12/8px collapsed onto the three-value radius scale */ --hd-radius-lg: var(--hd-radius-card); --hd-radius-md: var(--hd-radius-card); --hd-radius-sm: var(--hd-radius-input); } /* ══════════════════════════════════════════════════════════════ HIGH CONTRAST Windows High Contrast and "increase contrast" OS settings are common among older users. Deepen text and borders when asked. ══════════════════════════════════════════════════════════════ */ @media (prefers-contrast: more) { :root { --hd-text-secondary: var(--hd-ink-900); --hd-text-muted: var(--hd-ink-700); --hd-text-link: var(--hd-brand-800); --hd-border-color: var(--hd-ink-300); --hd-ink-100: #C4CDD6; --hd-focus-width: 4px; } } /* ══════════════════════════════════════════════════════════════ REDUCED MOTION ══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { :root { --hd-transition-fast: 0ms; --hd-transition: 0ms; --hd-transition-slow: 0ms; } }