/* TPF-159 — canonical shared DESIGN TOKENS. Provisional until logo/type/color sign-off.
   Additive: scoped compatibility mappings preserve the site's existing appearance. */
:root {
  --tpf-color-primary: #173d35;
  --tpf-color-deep: #123e32;
  --tpf-color-primary-hover: #27594b;
  --tpf-color-accent: #e9b05b;
  --tpf-color-accent-hover: #f4c071;
  --tpf-color-background: #ffffff;
  --tpf-color-surface: #f8f6ef;
  --tpf-color-surface-muted: #f5f8f4;
  --tpf-color-text: #193d35;
  --tpf-color-muted: #58665f;
  --tpf-color-border: #e8ede8;
  --tpf-color-focus: #b77719;
  --tpf-color-on-primary: #ffffff;
  --tpf-color-on-accent: #163a30;
  --tpf-font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --tpf-font-display: Georgia, "Times New Roman", serif;
  --tpf-type-xs: .75rem;
  --tpf-type-sm: .875rem;
  --tpf-type-base: 1rem;
  --tpf-type-lg: 1.125rem;
  --tpf-type-xl: 1.35rem;
  --tpf-type-2xl: clamp(1.75rem, 3vw, 2.5rem);
  --tpf-type-display: clamp(2.75rem, 6vw, 5.25rem);
  --tpf-leading-tight: 1.13;
  --tpf-leading-body: 1.65;
  --tpf-space-1: .25rem;
  --tpf-space-2: .5rem;
  --tpf-space-3: .75rem;
  --tpf-space-4: 1rem;
  --tpf-space-5: 1.25rem;
  --tpf-space-6: 1.5rem;
  --tpf-space-8: 2rem;
  --tpf-space-10: 2.5rem;
  --tpf-space-12: 3rem;
  --tpf-space-16: 4rem;
  --tpf-radius-sm: .4rem;
  --tpf-radius-md: .8rem;
  --tpf-radius-lg: 1.35rem;
  --tpf-radius-pill: 100rem;
  --tpf-shadow-card: 0 18px 45px rgba(14, 42, 32, .07);
  --tpf-shadow-popover: 0 18px 52px rgba(14, 42, 32, .18);
  --tpf-layout-container: 1170px;
  --tpf-layout-gutter: clamp(1rem, 4vw, 2rem);
  --tpf-motion-fast: 150ms;
  --tpf-motion-normal: 220ms;
  --tpf-z-header: 1000;
  --tpf-z-dialog: 1100;
}
/* Existing component CSS uses these names; mapping is opt-in when this file is loaded. */
.tpf-header {
  --tpf-forest: var(--tpf-color-primary);
  --tpf-green: var(--tpf-color-primary-hover);
  --tpf-ink: var(--tpf-color-text);
  --tpf-secondary: var(--tpf-color-muted);
  --tpf-gold: var(--tpf-color-accent);
  --tpf-gold-hover: var(--tpf-color-accent-hover);
  --tpf-border: var(--tpf-color-border);
  --tpf-focus: var(--tpf-color-focus);
  --tpf-surface: var(--tpf-color-background);
  --tpf-pale: var(--tpf-color-surface-muted);
}
.tpf-footer { --tpf-footer-forest: var(--tpf-color-primary); --tpf-footer-gold: var(--tpf-color-accent); }
@media (prefers-reduced-motion: reduce) {
  :root { --tpf-motion-fast: 0ms; --tpf-motion-normal: 0ms; }
}