/* =============================================================================
PRIMITIVES — design tokens (single source of truth).
The customizable layer of the template. ALL color, font, size, space, and
motion choices live here. To rebrand a project, edit ONLY this file.
Components in styles.css reference these variables and should not be touched
unless you are restructuring layout.
Load order: primitives.css FIRST, then styles.css.
─── COLOR — TWO TIER ─────────────────────────────────────────────────────
TIER 1 (raw palette, OKLCH): --cedar-* --bark-* --bone-* --slate-* --moss-*
--linen --stone-* --white*. Edit these to rebrand.
TIER 2 (semantic roles): --brand, --accent, --surface*, --text*, --line*,
--on-dark*, --placeholder. Components reference these only.
─── ROLES (TIER 2) ──────────────────────────────────────────────────────
--brand Cedar — buttons, icons, hover targets, list bullets.
--brand-strong Deeper cedar — wordmark default, btn hover, pressed.
--brand-on-dark Brighter cedar — solid brand surfaces on dark (e.g.
hero CTA button bg).
--accent Bark — CTA accents, link hovers on light.
--accent-hover Darker bark for --accent hover.
--accent-on-dark Cream/linen highlight on dark surfaces (small text,
icons, ornaments — utility-bar, hero eyebrow,
footer wordmark accent, pull-quote ornaments).
--surface Page background (warm white).
--surface-2 Lighter alt surface (trust strip, contact-map).
--surface-3 Darker alt surface (about teaser, cta-banner, contact-panel).
--surface-dark Charcoal — hero, utility bar, footer.
--surface-darker Deeper charcoal — footer base strip.
--text Strong text (headings + body).
--text-muted Tertiary text (captions, small labels).
--on-dark White on dark surfaces.
--on-dark-soft 86% white — utility, hero-sub, footer link.
--on-dark-muted 64% white — footer brand p, copyright.
--line Hairlines on light surfaces.
--line-on-dark 22% white — pull-quote dividers.
--placeholder Image placeholder fill.
─── TYPE — families ──────────────────────────────────────────────────────
--font-body Body copy, paragraphs, nav, buttons, footer.
--font-display Headings, hero h1, logo wordmark, large display text.
Defaults to system stack — swap to a Google Font for
visual identity. (Add the in includes/head.php.)
─── TYPE — size scale (fluid via clamp; base 16px) ──────────────────────
Fluid range interpolates between viewport 360px (mobile portrait) and
1280px (desktop max). Below 360 → min; above 1280 → max.
--fs-xs 11 → 13 px reserved for small captions/attribution (unused)
--fs-sm 13 → 14 px eyebrow, footer h4, label
--fs-md 14 → 15 px buttons, small body
--fs-base 16 px body default (fixed); hero-sub via t-body-lead
--fs-lg 18 px section deck (fixed)
--fs-xl 22 px mid display, card h3 (fixed)
--fs-2xl 28 → 32 px cta heading (t-display-cta)
--fs-3xl 36 → 44 px section heading
--fs-4xl 48 → 58 px hero h1
─── TYPE — weight, line-height, letter-spacing ───────────────────────────
--fw-regular / --fw-medium / --fw-semibold 400 / 500 / 600
--lh-tight / --lh-snug / --lh-normal 1.1 / 1.3 / 1.5
--ls-tight / --ls-wide / --ls-widest -.01 / .06 / .15 em
─── SPACE (rem; base 16px; px-in-name for self-documentation) ───────────
--space-4 0.25rem (4px) tight gaps inside cards, icon-text gaps
--space-8 0.5rem (8px) button gaps, small margins, list gaps
--space-12 0.75rem (12px) compact card padding
--space-16 1rem (16px) default block gaps
--space-20 1.25rem (20px) grid gaps, mid-tier internal padding
--space-24 1.5rem (24px) section internal gutter, container gutter
--space-40 2.5rem (40px) larger block gaps, section title margin
--space-56 3.5rem (56px) between major content blocks
--space-80 5rem (80px) vertical section padding (top/bottom of every )
─── BORDER + RADIUS ──────────────────────────────────────────────────────
--border-width 1px default border weight
--radius-sm 2px tight corners (focus outlines, attribution badges)
--radius 4px default corner radius (buttons, cards, images)
─── SHADOW ───────────────────────────────────────────────────────────────
--shadow-sm subtle elevation (mobile phone button)
--shadow-md card / map-card / story image elevation
─── LAYOUT ───────────────────────────────────────────────────────────────
--container-max 1200px max content width; controls how wide the design
sits on large screens.
--gutter 24px container side padding.
─── COMPONENT SIZING ─────────────────────────────────────────────────────
--bar-h 38px utility bar + mobile-phone btn height
--logo-h 46px logo mark — desktop
--logo-h-sm 36px logo mark — mobile
--nav-gap clamp(14,2vw,28px) inter-link gap in primary nav
--btn-h 42px default button minimum height
--phone-btn-w 54px mobile-phone button width
============================================================================= */
:root {
/* ───────────────────────────────────────────────────────────────────────
COLOR — TIER 1: raw palette (OKLCH; hex equivalents in comments).
Rebrand entry point — change values here, semantic roles auto-inherit.
─────────────────────────────────────────────────────────────────────── */
/* Cedar — brand green */
--cedar-300: oklch(0.620 0.060 148); /* ≈ #7d9b87 — brand on dark surfaces */
--cedar-500: oklch(0.450 0.050 150); /* ≈ #557060 — primary brand */
--cedar-700: oklch(0.395 0.024 153); /* ≈ #495e4d — pressed/hover */
/* Bark — accent brown */
--bark-500: oklch(0.518 0.052 50); /* ≈ #8e6a55 */
--bark-700: oklch(0.426 0.046 48); /* ≈ #6f5443 — hover */
/* Bone — warm light surfaces */
--bone-50: oklch(0.991 0.008 95); /* ≈ #fefcf5 — page bg */
--bone-100: oklch(0.960 0.012 95); /* ≈ #f5f2ea — strip surface */
--bone-200: oklch(0.928 0.018 105); /* ≈ #ecede1 — alt surface */
--bone-300: oklch(0.851 0.024 100); /* ≈ #d7d6c4 — hairlines */
/* Slate — cool dark surfaces */
--slate-700: oklch(0.323 0.012 240); /* ≈ #374046 — dark surface */
--slate-800: oklch(0.262 0.011 245); /* ≈ #2a3036 — deeper strip */
/* Moss — text on light */
--moss-500: oklch(0.444 0.012 150); /* ≈ #5e665c — muted text */
--moss-900: oklch(0.265 0.012 155); /* ≈ #26302b — strong text */
/* Linen — bark tint accent on dark surfaces */
--linen: oklch(0.886 0.016 65); /* ≈ #e8ded6 */
/* Stone — neutral image placeholder */
--stone-300: oklch(0.866 0 0); /* ≈ #ddd */
/* White + alpha steps for use on dark surfaces */
--white: #fff;
--white-soft: rgb(255 255 255 / 0.86);
--white-muted: rgb(255 255 255 / 0.64);
--white-line: rgb(255 255 255 / 0.22);
/* ───────────────────────────────────────────────────────────────────────
COLOR — TIER 2: semantic roles (always reference Tier 1).
Components consume these. Never hardcode hex/oklch in components.
─────────────────────────────────────────────────────────────────────── */
/* Brand */
--brand: var(--cedar-500);
--brand-strong: var(--cedar-700); /* deeper cedar — wordmark, btn hover, pressed states */
--brand-on-dark: var(--cedar-300); /* brighter cedar — for solid brand blocks on dark surfaces */
/* Accent */
--accent: var(--bark-500);
--accent-hover: var(--bark-700);
--accent-on-dark: var(--linen); /* cream highlight on dark — small text/icons/ornaments */
/* Surfaces — light */
--surface: var(--bone-50); /* page bg */
--surface-2: var(--bone-100); /* trust strip, contact-map (lighter alt) */
--surface-3: var(--bone-200); /* about teaser, cta-banner, contact-panel (darker alt) */
/* Surfaces — dark (Q4 — semantic aliases kept) */
--surface-dark: var(--slate-700);
--surface-darker: var(--slate-800);
--bar-bg: var(--surface-darker); /* utility bar — deepest dark strip */
--hero-dark: var(--surface-dark);
--footer-bg: var(--surface-dark);
--footer-base: var(--surface-darker);
/* Text — on light (Q3 — ink + text collapsed) */
--text: var(--moss-900);
--text-muted: var(--moss-500);
/* Text — on dark */
--on-dark: var(--white);
--on-dark-soft: var(--white-soft);
--on-dark-muted: var(--white-muted);
/* Lines */
--line: var(--bone-300);
--line-on-dark: var(--white-line);
/* Image placeholder fill (Q5 — tokenized) */
--placeholder: var(--stone-300);
/* Composite — image overlay (dark vignette for hero/cover images with text on top).
Two-pass gradient: horizontal darken-from-left + vertical edge fade. */
--image-overlay-dark:
linear-gradient(90deg, rgb(15 15 15 / 0.88) 0%, rgb(15 15 15 / 0.72) 36%, rgb(15 15 15 / 0.22) 72%),
linear-gradient(180deg, rgb(15 15 15 / 0.35) 0%, rgb(15 15 15 / 0.12) 50%, rgb(15 15 15 / 0.45) 100%);
/* Composite — pull-quote section background (image + darken gradient). */
--pull-quote-bg:
linear-gradient(0deg, rgb(15 22 18 / 0.5), transparent 60%),
url("../img/bark-texture.webp") center / cover;
/* Type — families. Lora display + Inter body. */
--font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-display: 'Lora', Georgia, 'Times New Roman', serif;
/* Type — size scale (fluid; viewport 360 → 1280px) */
--fs-xs: clamp(0.6875rem, calc(0.639rem + 0.217vw), 0.8125rem); /* 11 → 13px */
--fs-sm: clamp(0.8125rem, calc(0.788rem + 0.109vw), 0.875rem); /* 13 → 14px */
--fs-md: clamp(0.875rem, calc(0.851rem + 0.109vw), 0.9375rem); /* 14 → 15px */
--fs-base: 1rem; /* 16px */
--fs-lg: 1.125rem; /* 18px */
--fs-xl: 1.375rem; /* 22px */
--fs-2xl: clamp(1.75rem, calc(1.652rem + 0.435vw), 2rem); /* 28 → 32px */
--fs-3xl: clamp(2.25rem, calc(2.054rem + 0.870vw), 2.75rem); /* 36 → 44px */
--fs-4xl: clamp(3rem, calc(2.755rem + 1.087vw), 3.625rem); /* 48 → 58px */
/* Type — weight */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
/* Type — line-height */
--lh-tight: 1.1;
--lh-snug: 1.3;
--lh-normal: 1.5;
/* Type — letter-spacing */
--ls-tight: -.01em;
--ls-wide: .06em;
--ls-widest: .15em;
/* Space (rem; base 16px; px-in-name for self-documentation) */
--space-4: 0.25rem; /* 4px */
--space-8: 0.5rem; /* 8px */
--space-12: 0.75rem; /* 12px */
--space-16: 1rem; /* 16px */
--space-20: 1.25rem; /* 20px */
--space-24: 1.5rem; /* 24px */
--space-40: 2.5rem; /* 40px */
--space-56: 3.5rem; /* 56px */
--space-80: 5rem; /* 80px */
/* Section rhythm */
--section-py: var(--space-80);
--moment-py: clamp(5rem, 12vw, 9rem); /* 80 → 144px — pull-quote */
--banner-py: clamp(28px, 3.5vw, 44px); /* tighter than section — cta-banner stripe */
/* Border + radius */
--border-width: 1px;
--radius-sm: 2px;
--radius: 4px;
/* Shadow */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
--shadow-md: 0 4px 14px rgba(0, 0, 0, .06);
/* Composite — inner top/bottom edge shadow ("stamped into the page"). For
feature/moment sections that should feel recessed against neighbours. */
--shadow-edge-inset:
inset 0 8px 24px -8px rgb(0 0 0 / 0.45),
inset 0 -8px 24px -8px rgb(0 0 0 / 0.45);
/* Layout */
--container-max: 1200px;
--gutter: 24px;
/* Component sizing — fixed visual heights/dimensions used across components */
--bar-h: 38px; /* utility bar + mobile-phone btn height */
--logo-h: 46px; /* logo mark — desktop */
--logo-h-sm: 36px; /* logo mark — mobile */
--nav-gap: clamp(14px, 2vw, 28px); /* inter-link gap in primary nav */
--btn-h: 42px; /* default button minimum height */
--phone-btn-w: 54px; /* mobile-phone button width */
}