/* ============================================================================= KG Homestead — design tokens See site-plan/SITE_PLAN.md §2 for the palette story. Inherit --c-* from shared/design-system/tokens.css; this file defines project-specific --kgh-* tokens. ============================================================================= */ :root { /* Rustic-farmhouse palette — homepage, /about/, /buy/eggs/, /permits/, /journal/ */ --kgh-barn-red: #9c3a31; --kgh-barn-red-deep: #7a2d24; --kgh-cream: #f4ede0; --kgh-bone: #fbf7ef; --kgh-sage: #7a8a6e; --kgh-sage-deep: #5a6d4d; --kgh-butter: #f3c969; --kgh-butter-deep:#dba834; --kgh-gravel: #3a3a36; --kgh-gravel-soft:#5a5a55; /* Modern-clean palette — /marketplace/, /cart/, dashboards */ --kgh-off-white: #f9f8f4; --kgh-graphite: #1f1f1f; --kgh-rust-deep: #7a2d24; --kgh-stone: #e7e3d8; --kgh-paper: #ffffff; /* Semantic */ --kgh-ok: #4d7c4f; --kgh-warn: #c98a2a; --kgh-err: #b3382e; --kgh-info: #4a6c8a; /* Type */ --kgh-font-serif: 'Source Serif Pro', 'Source Serif 4', 'Source Serif', Cardo, Georgia, serif; --kgh-font-sans: Inter, -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif; --kgh-font-slab: 'Roboto Slab', 'Source Serif Pro', Georgia, serif; --kgh-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Shape */ --kgh-radius-sm: 6px; --kgh-radius-md: 12px; --kgh-radius-lg: 22px; --kgh-radius-xl: 32px; --kgh-shadow-sm: 0 1px 2px rgba(58, 58, 54, 0.08); --kgh-shadow-md: 0 6px 18px rgba(58, 58, 54, 0.12); --kgh-shadow-lg: 0 18px 40px rgba(58, 58, 54, 0.16); --kgh-shadow-stamp: 0 2px 0 rgba(122, 45, 36, 0.18), 0 4px 10px rgba(156, 58, 49, 0.18); /* Motion */ --kgh-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --kgh-ease-in: cubic-bezier(0.55, 0, 0.55, 0.2); --kgh-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --kgh-d-fast: 120ms; --kgh-d-base: 220ms; --kgh-d-slow: 420ms; /* Container */ --kgh-container: 1180px; --kgh-container-narrow: 880px; } /* Surface switching — or "clean" */ body[data-surface="rustic"] { --kgh-bg: var(--kgh-cream); --kgh-surface: var(--kgh-bone); --kgh-ink: var(--kgh-gravel); --kgh-ink-soft:var(--kgh-gravel-soft); --kgh-accent: var(--kgh-barn-red); --kgh-accent-deep: var(--kgh-barn-red-deep); --kgh-line: rgba(58, 58, 54, 0.14); --kgh-h-font: var(--kgh-font-serif); } body[data-surface="clean"] { --kgh-bg: var(--kgh-off-white); --kgh-surface: var(--kgh-paper); --kgh-ink: var(--kgh-graphite); --kgh-ink-soft:#5a5a55; --kgh-accent: var(--kgh-sage-deep); --kgh-accent-deep: #475a3c; --kgh-line: var(--kgh-stone); --kgh-h-font: var(--kgh-font-sans); } /* Reduced motion: kill the kinetic stuff but keep the structural transitions */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }