/* * DESIGN-LANGUAGE-G tokens (§1). * Wave 1a foundation. Declares the sitewide CSS custom properties every * G-language component reads. Loaded before every other G stylesheet * via wp_enqueue in functions.php. * * DO NOT edit values here to fix a per-component bug — the token is * shared. Update the token only when the design language decides a * new value, and update DESIGN-LANGUAGE-G.md §1 in the same change. */ :root { /* 1.1 Ground and ink */ --page: #FFFEFA; --paper: #FBF7EB; --cream: #F4EEE0; --hair: #DDD5BE; --hair-2: #E9E2CB; --rule: #0F1518; --ink: #0D1214; --ink-2: #3B4247; --ink-3: #606870; --mute: #8B9098; /* Hub hues — Sky (Bird Basics), Sun (Routine Care), Coral (Bird Health + site accent), Forest (Vet Corner + deep band). */ --sky: #5AAAD1; --sky-deep: #256E90; --sky-tint: #DFEDF5; --sun: #F3C334; --sun-deep: #9E6E0C; --sun-tint: #FBEEC0; --coral: #D14D4D; --coral-deep: #8F2A2A; --coral-tint: #F7DEDC; --forest: #26534A; --forest-deep: #0F2A24; --forest-tint: #DAE8E3; /* Per-body-scope hub aliases. Every page sets --hub / --hub-deep / --hub-tint on via the data-hub attribute so components inside the page inherit the right hue without per-page classnames. The trust and home scopes both alias to the site-wide coral accent. */ --hub: var(--coral); --hub-deep: var(--coral-deep); --hub-tint: var(--coral-tint); /* 1.2 Typography — self-hosted; families declared in fonts.css. */ --display: 'Nunito', 'Helvetica Neue', Arial, sans-serif; --body: 'Public Sans', 'Helvetica Neue', Arial, sans-serif; --meta: 'Public Sans', 'Helvetica Neue', Arial, sans-serif; --display-w: 800; --display-w-2: 700; --meta-w: 600; --meta-track: .10em; --h1-size: 60px; --h2-size: 42px; --h3-card: 26px; --body-size: 16px; /* 1.3 Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; --space-9: 64px; --space-10: 82px; --space-11: 96px; --space-12: 128px; --wrap: 1280px; --wrap-gutter-dt: 32px; --wrap-gutter-mb: 20px; --section-py-dt: var(--space-10); --section-py-mb: 52px; /* 1.4 Border / radius */ --radius-0: 0; --radius-1: 3px; --radius-2: 4px; --radius-3: 6px; --radius-round: 999px; /* Sticky header height (JS may update; static default here). Amendment 4 (owner ruling 2026-08-20): masthead utility bar + colophon "Editorial standards" band retired sitewide. Header row 1 sizes off the SQUARE MARK ALONE (no accompanying wordmark to protect). The pre-amendment value accommodated a mark plus tagline breathing; these values give ~12px vertical breathing around a 64px mark. Companion mobile token sets row height in the small-viewport block. */ --header-h: 88px; --header-h-mb: 72px; } /* Hub scopes — Every page BODY carries a data-hub attribute; components inside the page inherit --hub via this selector. */ body[data-hub="basics"] { --hub: var(--sky); --hub-deep: var(--sky-deep); --hub-tint: var(--sky-tint); } body[data-hub="routine"] { --hub: var(--sun); --hub-deep: var(--sun-deep); --hub-tint: var(--sun-tint); } body[data-hub="health"] { --hub: var(--coral); --hub-deep: var(--coral-deep); --hub-tint: var(--coral-tint); } body[data-hub="vet"] { --hub: var(--forest); --hub-deep: var(--forest-deep); --hub-tint: var(--forest-tint); } body[data-hub="trust"], body[data-hub="home"] { --hub: var(--coral); --hub-deep: var(--coral-deep); --hub-tint: var(--coral-tint); }