/** * css/variables.css — Berryhill Mini Trucks design token system * * Three themes are defined as CSS classes and [data-theme] attributes: * .theme-dark / [data-theme="dark"] — Black bg, gold headings (primary brand) * .theme-light / [data-theme="light"] — White bg, dark headings * .theme-purple / [data-theme="purple"] — Deep purple bg, gold headings, purple accents * * Each theme sets a predictable set of semantic tokens that components consume: * --bh-section-bg Background color * --bh-section-text Body / paragraph text * --bh-section-heading H1–H3 heading color * --bh-section-subtext Muted / secondary text * --bh-section-border Dividers, card outlines * --bh-btn-primary-bg Primary button fill * --bh-btn-primary-text Primary button label * --bh-btn-secondary-bg Secondary button fill * --bh-btn-secondary-text Secondary button label */ /* ── Global brand tokens (never change with theme) ─────────────────────────── */ :root { /* Brand palette */ /* NOTE: --bh-color-primary is the static fallback only. Every server-rendered page injects from the DB via buildHeadTags() — that live value always wins because it comes after this stylesheet in the . Change this only if you want a different default for local/static development. */ --bh-color-primary: #B2995A; /* Gold — static fallback; DB value overrides at runtime */ --bh-color-secondary: #a09edd; /* Purple — secondary / accent brand color */ --bh-color-dark: #0a0a0a; /* Near-black used for dark sections */ --bh-color-white: #ffffff; --bh-color-offwhite: #faf7f2; /* Warm off-white for light section BGs */ --bh-color-sand: #EFE4D3; /* Warm border / divider tone */ /* Typography */ --bh-font-heading: 'Anton', sans-serif; --bh-font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif; /* Spacing scale */ --bh-space-xs: 8px; --bh-space-sm: 16px; --bh-space-md: 32px; --bh-space-lg: 64px; --bh-space-xl: 96px; /* Radii */ --bh-radius-sm: 6px; --bh-radius-md: 12px; --bh-radius-lg: 16px; /* Transitions */ --bh-transition: 0.2s ease; } /* ── Dark theme — black background, gold headings ──────────────────────────── */ .theme-dark, [data-theme="dark"] { --bh-section-bg: #0a0a0a; --bh-section-text: rgba(255, 255, 255, 0.75); --bh-section-heading: #B2995A; /* Gold on dark */ --bh-section-subtext: rgba(255, 255, 255, 0.45); --bh-section-border: rgba(255, 255, 255, 0.08); --bh-btn-primary-bg: #B2995A; --bh-btn-primary-text: #000000; --bh-btn-secondary-bg: rgba(255, 255, 255, 0.08); --bh-btn-secondary-text: #ffffff; } /* ── Light theme — white / off-white background, dark headings ─────────────── */ .theme-light, [data-theme="light"] { --bh-section-bg: #ffffff; --bh-section-text: #333333; --bh-section-heading: #121212; --bh-section-subtext: #888888; --bh-section-border: #EFE4D3; --bh-btn-primary-bg: #B2995A; --bh-btn-primary-text: #ffffff; --bh-btn-secondary-bg: #ffffff; --bh-btn-secondary-text: #121212; } /* ── Purple / accent theme — deep purple background, gold headings ──────────── */ .theme-purple, [data-theme="purple"] { --bh-section-bg: #1e1b42; --bh-section-text: rgba(255, 255, 255, 0.82); --bh-section-heading: #B2995A; /* Gold on purple */ --bh-section-subtext: rgba(160, 158, 221, 0.7); --bh-section-border: rgba(160, 158, 221, 0.2); --bh-btn-primary-bg: #a09edd; /* Purple button on purple */ --bh-btn-primary-text: #ffffff; --bh-btn-secondary-bg: rgba(255, 255, 255, 0.08); --bh-btn-secondary-text: #ffffff; } /* ── Section-level theme assignments ───────────────────────────────────────── */ /* Header — dark */ .bh-site-header { --bh-section-bg: #000000; --bh-section-text: rgba(255, 255, 255, 0.75); --bh-section-heading: #B2995A; --bh-section-border: rgba(255, 255, 255, 0.08); } /* Inventory / truck grid — light */ #inventory, .bh-inventory-section { --bh-section-bg: #ffffff; --bh-section-text: #333333; --bh-section-heading: #121212; --bh-section-border: #EFE4D3; } /* Reviews section — light (warm off-white) */ #bh-reviews-section { --bh-section-bg: #faf7f2; --bh-section-text: #444444; --bh-section-heading: #121212; --bh-section-subtext: #888888; --bh-section-border: #EFE4D3; } /* Footer — dark */ .bh-site-footer { --bh-section-bg: #0a0a0a; --bh-section-text: rgba(255, 255, 255, 0.6); --bh-section-heading: #B2995A; --bh-section-border: rgba(255, 255, 255, 0.07); } /* ── Helper: apply theme tokens to section backgrounds ─────────────────────── */ /* Opt-in by adding class="theme-dark" / "theme-light" / "theme-purple" to any section element, then reference the tokens in your component CSS. Example: background: var(--bh-section-bg); color: var(--bh-section-text); h2 { color: var(--bh-section-heading); } */