/* ========================================================================== tokens.css — shared design tokens + component library Single source of truth for primitives reused across all pages. See design.md §3 (palette) & §4 (type). ── COLOR TOKENS (--c-*) ─────────────────────────────────────────────── --c-sage, --c-sage-light, --c-sage-tint, --c-sage-muted, --c-wash, --c-slate, --c-near-black, --c-sand, --c-text, --c-text-soft, --c-white, --c-off ── TYPE / LAYOUT TOKENS ──────────────────────────────────────────────── --font-head ("Oswald"), --font-body ("Work Sans"), --maxw (1080px) ── COMPONENT KNOBS (override per focus; defaults below) ──────────────── Button : --btn-bg --btn-fg --btn-bg-hover --btn-fg-hover --btn-radius --btn-pad --btn-size --btn-tracking --btn-weight Card : --card-bg --card-fg --card-border --card-radius --card-pad Form : --field-bg --field-fg --field-border --field-border-focus --field-radius --field-label --field-placeholder Nav : --nav-bg --nav-fg --nav-border --nav-accent Footer : --foot-bg --foot-fg --foot-head --foot-link --foot-border ── SHARED COMPONENTS / CLASSES ───────────────────────────────────────── Layout : .wrap, .section, .section-head Eyebrow : .eyebrow, .kicker Buttons : .btn, .btn.ghost Card : .card Forms : .form, .field, .form-row, label, input, select, textarea (controls inside .form/.field are token-driven) Nav/Foot : .site-nav (+children), .site-footer (+children), .back ── PER-FOCUS SCOPING ─────────────────────────────────────────────────── Set the focus on with one of: .focus-klinik | .focus-workout | .focus-pp. Each tunes the component knobs above to its tone. Pages then only need genuinely page-unique CSS in their inline