/* ========================================================================= THE HARDWOOD GUYS — CT & NY (hardwoodguys.co) — DESIGN TOKENS Originally ported from the Georgia site with the accent balance inverted (RED LEADS, NAVY SUPPORTS). Per owner feedback (2026-08-04) that system read too red — this restyle keeps red strictly as an ACCENT (CTA fills only) and moves every dark SURFACE (header, footer, page-title bands, the CTA band) to a near-black neutral instead: --red #E00410 fills only: CTA buttons, accents. Never long text, never a full-page surface. --gray-ink #1E1E20 the new workhorse: header/footer/page-hero/CTA-band surfaces. 16.64:1 with white text (AAA), and red CTA fills read fine on it too (3.32:1 — clears the 3:1 non-text/UI-component threshold, see the traps note below). --navy #282C48 now carries the heading role on light sections (13.60:1 AAA) — LESS RED per owner: red is spent exclusively on clickable CTAs, nowhere else. --red-deep #7E030B kept only as a minor accent (link-hover text, small borders) on LIGHT surfaces — it is no longer used as a dark-surface fill; on --gray-ink it drops to 1.51:1 and is an explicit fail (see traps). Every ratio stated below is verified by design/contrast-check.py, which recomputes them from the hex values with the WCAG relative-luminance formula and exits non-zero if any stated number drifts. Run it after ANY edit to section 1. (Rule inherited from Georgia, where two invisible white-on-off-white buttons shipped at 1.08:1.) RULE: components.css must reference ONLY the "SEMANTIC LAYER" tokens below, never the raw palette tokens directly. OPEN: the CT/NY logo file has not been supplied yet. If it needs a light header surface (like Georgia's crest did), --color-bg-header-glass / -solid flip to --white and header text to --red-deep — both directions are AAA, so the swap is safe either way. ========================================================================= */ :root { /* --------------------------------------------------------------------- 1. RAW PALETTE — WCAG-verified by design/contrast-check.py. --------------------------------------------------------------------- */ --red: #E00410; /* white on --red = 5.01:1 (AA) — CTA fill, same as Georgia brand red */ --red-hover: #C7040E; /* white on --red-hover = 6.08:1 (AA) — hover DARKENS, never lightens */ --red-deep: #7E030B; /* on white = 11.02:1 (AAA) — minor accent on LIGHT surfaces only (link-hover text, small borders); white on it 11.02:1, but it is no longer used as a dark-surface fill — see --gray-ink below */ --gray-ink: #1E1E20; /* white on it = 16.64:1 (AAA) — dark-gray-glass restyle (2026-08-04): the new surface for header, footer, page-title bands, CTA band */ --gray-ink-rgb: 30, 30, 32; --navy: #282C48; /* on white = 13.60:1 (AAA) — LEADS headings on light sections now (owner: less red) */ --blue: #0070B3; /* on white = 5.29:1 (AA) — links, focus ring (on off-white 4.90:1 AA) */ --gold: #F8B800; /* navy on gold = 7.67:1 (AAA) · gold on --red-deep = 6.22:1 (AA) · gold on --gray-ink = 9.39:1 (AAA) — star fills, small icon accents on dark surfaces */ --ink: #313131; /* on white = 13.01:1 (AAA) — body copy */ --ink-muted: #6B6B6B; /* on white = 5.33:1 (AA) · on off-white 4.93:1 (AA) */ --off-white: #F6F6F6; /* --red on it = 4.63:1 (AA, no margin — short accents only, never long copy) */ --border: #C8C8C8; /* on white 1.67:1 — DECORATIVE ONLY, never text, never a sole UI-state cue */ --white: #FFFFFF; /* Neutral UI utility — shadows and photo scrims only, never text. */ --near-black: #0D0D0D; --near-black-rgb: 13, 13, 13; --red-rgb: 224, 4, 16; --red-deep-rgb: 126, 3, 11; --navy-rgb: 40, 44, 72; /* KNOWN CONTRAST TRAPS — documented so nobody "fixes" these by accident. red #E00410 on --red-deep = 2.20:1 (fails) — NEVER put a bright-red CTA fill directly against a --red-deep surface (legacy Georgia pairing; --red-deep is not used as a surface in this system any more). red on --navy = 2.72:1 (fails) red on --ink = 2.60:1 (fails) blue on --navy = 2.57:1 (fails) blue on --red-deep = 2.08:1 (fails) red on --gold = 2.82:1 (fails) gold on white = 1.77:1 (fails — gold is a fill, never text on light) #8F8F8F "muted gray" = 3.23:1 (fails) — banned; use --ink-muted. GRAY-GLASS SURFACE (2026-08-04 restyle) — every pairing against the new --gray-ink dark surface: white on --gray-ink = 16.64:1 (AAA) — body/nav/inverse text there. red #E00410 on --gray-ink = 3.32:1 — FAILS 4.5:1 text, but PASSES the 3:1 non-text/UI-component minimum, so red CTA button FILLS are legal directly on --gray-ink (the white text inside the button is what carries the 5.01:1 text-contrast requirement, not the button-vs-page edge). Never set bare red TEXT on gray-ink. red-deep on --gray-ink = 1.51:1 (fails) — never red-deep as a surface accent or text color against gray-ink. blue on --gray-ink = 3.15:1 (fails the 4.5:1 text minimum) — no blue link text on gray-ink surfaces; links there are white + underline (see --color-nav-link / --color-nav-link-hover). gold on --gray-ink = 9.39:1 (AAA) — star ratings / small accents on gray-ink remain fine. */ /* --------------------------------------------------------------------- 2. SEMANTIC LAYER — the only tokens components.css may reference. --------------------------------------------------------------------- */ /* Backgrounds */ --color-bg-page: var(--white); --color-bg-page-alt: var(--off-white); /* Header background is now split in two: the header itself renders as translucent glass over the hero photo (header.css makes .site-header position:fixed and paints this), while every OTHER dark-gray surface (mobile nav panel, sticky-bar call half, hero/video placeholder fill) uses the opaque solid version. Both resolve to the same --gray-ink. */ --color-bg-header-glass: rgba(var(--gray-ink-rgb), 0.72); /* .site-header fill; blurred via backdrop-filter */ --color-bg-header-solid: var(--gray-ink); /* opaque dark surfaces + @supports fallback for the glass header */ /* Legacy alias — repointed (not left stale on --red-deep) in case anything outside design/ still references it; new code should use the -glass or -solid token above directly. */ --color-bg-header: var(--color-bg-header-solid); --color-bg-footer: var(--gray-ink); --color-bg-page-hero: var(--gray-ink); /* page-title bands: dark gray now, NOT red-deep */ --color-bg-card: var(--white); --color-bg-card-alt: var(--white); --color-bg-input: var(--white); --color-bg-input-disabled: var(--off-white); --color-bg-overlay: rgba(var(--near-black-rgb), 0.55); /* hero scrim — neutral, photos read naturally */ --color-bg-badge: var(--off-white); --color-bg-success: var(--off-white); --color-bg-error: var(--off-white); --color-bg-accent-navy: var(--navy); /* navy's supporting role: at most one dark band per page for rhythm */ /* Text */ --color-text-body: var(--ink); /* 13.01:1 AAA on white · 12.04:1 AAA on off-white */ --color-text-heading: var(--navy); /* 13.60:1 AAA on white · 12.58:1 AAA on off-white — LESS RED per owner: navy leads headings, red is CTA-only */ --color-text-display: var(--navy); /* hero/display type */ --color-text-muted: var(--ink-muted); /* 5.33:1 AA on white */ --color-text-inverse: var(--white); /* on --gray-ink = 16.64:1 AAA · on --navy = 13.60:1 AAA */ --color-text-link: var(--blue); /* 5.29:1 AA on white — light backgrounds ONLY (3.15:1 on --gray-ink) */ --color-text-link-hover: var(--red-hover); /* 6.08:1 AA on white — light backgrounds only */ --color-text-error: var(--red); /* 5.01:1 AA on white */ --color-text-success: var(--ink); /* icon + ink text; never colour alone */ --color-rating-star: var(--gold); /* decorative fill, paired with visible text rating */ /* Navigation (on --color-bg-header-glass/-solid / --color-bg-footer, i.e. on --gray-ink) */ --color-nav-link: var(--white); /* 16.64:1 AAA on --gray-ink */ --color-nav-link-hover: var(--white); /* NO colour swap on dark bg — hover = underline only (blue fails on gray-ink at 3.15:1) */ /* CTA / Buttons */ --color-cta-bg: var(--red); /* white on it 5.01:1 AA — on LIGHT sections only */ --color-cta-bg-hover: var(--red-hover); /* darkens: 6.08:1 AA */ --color-cta-text: var(--white); --color-cta-bg-disabled: var(--border); --color-cta-text-disabled: var(--ink-muted); /* CTA variant for the header/footer bands. Formerly needed because bright red was invisible on --red-deep (2.20:1); now that those bands are --gray-ink, red passes the 3:1 non-text/UI-component threshold (3.32:1) and the white text inside the button still carries its own 5.01:1 text contrast — so the "inverse" button is simply an alias of the primary CTA colors. Kept as a separate token pair (rather than deleting .btn--inverse) so header/footer markup doesn't need editing. */ --color-cta-inverse-bg: var(--color-cta-bg); --color-cta-inverse-text: var(--color-cta-text); --color-btn-secondary-bg: var(--white); --color-btn-secondary-text: var(--navy); /* 13.60:1 AAA — navy's supporting role */ --color-btn-secondary-border: var(--navy); --color-btn-secondary-hover-bg: var(--navy); --color-btn-secondary-hover-text: var(--white); /* Outline button — ONLY on the dark hero photo scrim. verify script must fail the build if .btn--outline appears outside a dark context (Georgia shipped two invisible buttons this exact way). */ --color-btn-outline-border: var(--white); --color-btn-outline-text: var(--white); --color-btn-outline-hover-bg: var(--white); --color-btn-outline-hover-text: var(--red-deep); /* 11.02:1 AAA */ /* Borders */ --color-border-default: var(--border); --color-border-input: var(--ink-muted); /* 5.33:1 — clears 3:1 non-text minimum; --border alone would not */ --color-border-input-focus: var(--blue); --color-border-input-error: var(--red); /* Focus ring — solid outline, never box-shadow-only. Blue so focus is never confused with error red (which is everywhere on this brand). */ --color-focus-ring: var(--blue); /* 5.29:1 / 4.90:1 on page bgs — clears 3:1 */ --color-focus-ring-inverse: var(--white); /* inside header/footer/hero where blue fails on dark */ /* Badges / chips */ --color-badge-bg: var(--off-white); --color-badge-text: var(--navy); /* 12.58:1 AAA — navy supports */ --color-badge-border: var(--border); /* Financing / info strip */ --color-strip-bg: var(--off-white); --color-strip-text: var(--ink); --color-strip-accent: var(--blue); /* icon accent only; red stays reserved for CTAs */ /* Section accent — navy band replaces Georgia's wood band as the "one dark section per page" rhythm device. */ --color-accent-navy: var(--navy); /* --------------------------------------------------------------------- 3. TYPE SCALE — identical to Georgia. No CDN font links, ever. --------------------------------------------------------------------- */ --font-heading: "Playfair Display", Georgia, "Times New Roman", Times, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: 1.0625rem; --text-md: 1.25rem; --text-lg: 1.5rem; --text-xl: 1.875rem; --text-2xl: 2.25rem; --text-3xl: 2.75rem; --text-4xl: clamp(2.25rem, 5vw + 1rem, 3.5rem); --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.75; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; /* --------------------------------------------------------------------- 4. SPACING — 4px base scale. --------------------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --touch-target-min: 44px; /* WCAG 2.2 Target Size 2.5.8 */ /* --------------------------------------------------------------------- 5. RADIUS --------------------------------------------------------------------- */ --radius-sm: 4px; --radius-base: 8px; --radius-lg: 16px; --radius-full: 999px; /* --------------------------------------------------------------------- 6. SHADOWS — elevation only; never the sole interactivity cue. --------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(var(--near-black-rgb), 0.08); --shadow-md: 0 4px 12px rgba(var(--near-black-rgb), 0.12); --shadow-lg: 0 12px 32px rgba(var(--near-black-rgb), 0.18); --shadow-header: 0 2px 8px rgba(var(--near-black-rgb), 0.12); --shadow-bottom-bar: 0 -2px 10px rgba(var(--near-black-rgb), 0.14); /* --------------------------------------------------------------------- 7. MOTION — reduced-motion handled centrally below. --------------------------------------------------------------------- */ --motion-fast: 150ms; --motion-base: 250ms; --motion-slow: 400ms; --motion-ease: cubic-bezier(0.4, 0, 0.2, 1); /* --------------------------------------------------------------------- 8. Z-INDEX SCALE --------------------------------------------------------------------- */ --z-header: 100; --z-bottom-bar: 150; --z-mobile-nav: 200; --z-skip-link: 300; /* --------------------------------------------------------------------- 9. LAYOUT --------------------------------------------------------------------- */ --container-max: 1200px; --container-pad: 16px; /* --------------------------------------------------------------------- 10. BREAKPOINTS (reference only — @media rules use literal px; no build step, so keep in sync by hand.) --------------------------------------------------------------------- */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; } @media (min-width: 768px) { :root { --container-pad: 24px; } } @media (min-width: 1024px) { :root { --container-pad: 40px; } } @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; } }