/** * Design tokens — the single source of truth for color and typography on * the frontend. Every component/layout/page CSS file must reference these * variables instead of hardcoding colors. * * Brand palette (everkit shop): dark olive green primary, muted warm gold * accent, warm off-white surfaces, dark charcoal text. Same token names as * before — only the values changed, so nothing that already referenced * these variables needed to change. See README.md "Design tokens" for how * this file relates to theme.json (which mirrors these same values for * the block editor — theme.json cannot reference this file directly, so * the two are kept in sync by hand; update both together). */ :root { --color-primary: #3f4a35; --color-primary-hover: #2e3627; --color-secondary: #6b6355; --color-accent: #b08c4f; --color-background: #fdfbf6; --color-surface: #f6f2ea; --color-surface-alt: #eee7d9; --color-text: #2b2a25; --color-text-muted: #766f5e; --color-heading: #23221d; --color-border: #e2ddd0; --color-success: #2f7d32; --color-warning: #a76800; --color-error: #b42318; --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); /* * GeneratePress prints its own dynamic Customizer CSS very late in * (after every enqueued stylesheet, so its live-preview always * wins) — that's what was showing GP's own grey defaults * (--base/--base-2/--base-3) as the page background around our * "separate containers" content boxes, instead of our own palette. * !important is the only thing that reliably beats a same-specificity * :root redeclaration that loads after ours; scoped narrowly to just * the background tokens so GP's other internal styling is untouched. */ --base: var(--color-surface) !important; --base-2: var(--color-background) !important; --base-3: var(--color-background) !important; /* Typography */ --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-heading: var(--font-body); --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-md: 1.125rem; --font-size-lg: 1.375rem; --font-size-xl: 1.75rem; --font-size-2xl: 2.25rem; --font-size-3xl: 3rem; --line-height-tight: 1.2; --line-height-normal: 1.6; /* Spacing / radius — unchanged from the original architecture. */ --myshop-space-xs: 0.5rem; --myshop-space-sm: 1rem; --myshop-space-md: 2rem; --myshop-space-lg: 4rem; --myshop-radius: 4px; /* * Global fluid layout system — see assets/css/layouts/containers.css * for how these are consumed by every section (header, announcement * bar, category nav, mega-menu, homepage, footer, WooCommerce pages): * width: min(100% - 2*gutter, max-width). Below the max-width, the * container is fluid (100% minus gutters); once 100% - 2*gutter would * exceed max-width, it stops growing and the leftover viewport space * becomes equal left/right margins — a real, fixed desktop ceiling, * not a vw-scaled one. * * Previously --layout-max-width chained to --gp-container-width (a * clamp(1200px, 96vw, 100vw) tied to GeneratePress's Customizer * setting, set in inc/setup/layout.php) — 96vw/100vw meant it never * actually stopped growing, so content ran nearly edge-to-edge on * large/ultrawide screens instead of centering with real margins. * Deliberately decoupled now: this theme's own container system is * authoritative (see containers.css's .grid-container override, * which now reads --layout-max-width instead of --gp-container-width * too). --gp-container-width itself is untouched and still exposed, * for the few native GeneratePress-rendered regions that don't use * this token system at all (documented in inc/setup/layout.php). */ --layout-max-width: 1600px; --layout-wide-max-width: 1840px; --layout-readable-max-width: 48rem; /* * Single gutter value shared by every section using the container * formula above — same value everywhere is what makes their left/right * edges actually match. clamp(24px, 3vw, 64px) per an explicit * "correct the global container system" request: bigger floor and * ceiling than the previous clamp(16px, 2vw, 30px) — noticeably more * breathing room at typical desktop widths. */ --layout-gutter: clamp(24px, 3vw, 64px); --layout-gutter-small: clamp(1rem, 2vw, 2rem); /* * Header regions only (main header row + announcement bar, both in * assets/css/layouts/header.css) — deliberately wider than * --layout-max-width. Ordinary page content (hero, categories, product * grids, footer) stays capped at --layout-max-width (1600px); the * header is the one deliberate exception, allowed to spread further on * large screens since it's just three widely-spaced zones (or three * short items on the announcement bar), not dense reading content. * Still uses the same --layout-gutter as everything else — only the * ceiling differs, not the gutter system. */ --header-max-width: 1920px; /* Only consumer is the homepage (.myshop-hero / .myshop-section in home.css) — floor raised again, 64px -> 72px, per the corrective homepage pass. */ --section-spacing-block: clamp(72px, 6vw, 104px); --section-spacing-block-small: clamp(2rem, 4vw, 4rem); }