/* ============================================================
   Tavina Heritage Modern — Design Tokens (Tier 1 + Tier 2)
   Palette: Field & Forest (decided 2026-07-24)
   Spec: docs/DESIGN.md in tavina/website
   Fonts: self-hosted Inter (100–900) + Caveat (400–700), no external CDN
   ============================================================ */

/* ── Self-hosted fonts ── */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('../fonts/caveat/Caveat-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Tier 2: Field & Forest palette (themeable) ── */
  --tav-canvas: #FAF7F2;          /* warm bone page background — never pure white */
  --tav-surface: #FFFFFF;         /* cards/sheets — float via shadow, not border */
  --tav-ink: #2B2825;             /* warm charcoal text */
  --tav-ink-soft: #57504A;        /* secondary text */
  --tav-primary: #2F5D46;         /* deep pine — buttons, links, key UI */
  --tav-primary-hover: #274D3A;
  --tav-primary-ink: #FFFFFF;     /* text on pine */
  --tav-accent: #C4633A;          /* fired clay — sparing highlights/underlines */
  --tav-accent-soft: #F3E2D8;     /* soft accent wash (hero backdrops) */
  --tav-muted: #8A9384;           /* sage gray — muted text, resting icons */
  --tav-line: #E8E2D8;            /* warm hairline borders */
  --tav-line-light: #F0EAE0;      /* lighter internal dividers */
  --tav-shadow-tint: 43, 40, 37;  /* RGB triplet for warm-tinted shadows */

  /* ── Tier 1: structural tokens (locked — shared by every surface) ── */
  --tav-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --tav-font-display: 'Caveat', cursive;
  --tav-radius-card: 16px;
  --tav-radius-btn: 12px;
  --tav-radius-bubble: 18px;
  --tav-shadow-1: 0 2px 8px rgba(var(--tav-shadow-tint), .06), 0 12px 32px rgba(var(--tav-shadow-tint), .08);
  --tav-shadow-2: 0 4px 12px rgba(var(--tav-shadow-tint), .08), 0 20px 48px rgba(var(--tav-shadow-tint), .12);
  --tav-ease-out: cubic-bezier(.22, .61, .36, 1);
  --tav-dur: 180ms;
  --tav-wrap: 1180px;
  --tav-wrap-pad: 40px;
}

@media (max-width: 960px) {
  :root { --tav-wrap-pad: 22px; }
}