/* ============================================================
   WILDERFOLK DESIGN SYSTEM, TOKENS
   Generated for WordPress from the Claude-design handoff.
   Do not hand-edit in wp-admin; regenerate from source.
   ============================================================ */

/* ---------- Webfonts (self-hosted, licensed for @font-face) ---------- */
@font-face{
  font-family:"Wild Pines Park";
  src:url("../fonts/WildPinesPark-Regular.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Parkland Rounded";
  src:url("../fonts/ParklandRounded.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Parkland Script";
  src:url("../fonts/ParklandScript.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Parkland Brush";
  src:url("../fonts/ParklandBrush.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* ---- Pine / forest greens (primary) ---- */
  --pine-900:#16261A; --pine-800:#1F3320; --pine-700:#2D4A2D; --pine-600:#3A5A38;
  --pine-500:#4C6B47; --pine-400:#6E8460; --pine-300:#9AAB89; --pine-200:#C3CDB4;
  --pine-100:#E2E7D7;

  /* ---- Warm neutrals (aged paper / duff / tan) ---- */
  --paper-050:#FBF6EA; --paper-100:#F5ECD9; --paper-200:#EADFC6;
  --sand-300:#D9CBAD; --tan-400:#C4B8A0; --bark-600:#7A6A52;
  --duff-800:#3B3226; --duff-900:#2A2620;

  /* ---- Earthy accents ---- */
  --candy-600:#9B3D22; --candy-500:#B0542A; --candy-300:#D98E5A;
  --ochre-600:#B77E22; --ochre-500:#D19A34; --ochre-200:#EBD199;
  --fog-500:#8C968F; --fog-300:#B6BEB6; --fog-100:#DCE0DA;
  --tide-600:#3E6B63; --tide-400:#6E9A90;

  /* ---- Semantic surfaces ---- */
  --surface-page:var(--paper-100);
  --surface-card:var(--paper-050);
  --surface-raised:#FFFFFF;
  --surface-sunken:var(--paper-200);
  --surface-inverse:var(--pine-800);
  --surface-accent:var(--pine-700);

  /* ---- Semantic text ----
     Note: text tokens are deliberately deeper than the equivalent brand
     fill colours. candy-500 and bark-600 are correct as *fills*, but as
     small text on cream they land at 4.31:1 and 4.46:1, under WCAG AA.
     These two pass at 5.80:1 and 5.51:1 while reading as the same colour. */
  --text-body:var(--duff-900);
  --text-muted:#6B5C46;
  --text-faint:var(--fog-500);
  --text-inverse:var(--paper-100);
  --text-inverse-mut:var(--pine-200);
  --text-heading:var(--pine-800);
  --text-accent:var(--candy-600);
  --text-link:var(--pine-700);
  --text-link-hover:var(--candy-500);

  /* ---- Borders / rules ---- */
  --border-soft:var(--tan-400);
  --border-strong:var(--pine-700);
  --border-hair:#DFD3B8;
  --rule-color:var(--tan-400);

  /* ---- Actions ---- */
  --action-primary-bg:var(--pine-700);
  --action-primary-bg-hover:var(--pine-800);
  --action-primary-fg:var(--paper-050);
  --action-accent-bg:var(--candy-500);
  --action-accent-bg-hover:var(--candy-600);
  --action-accent-fg:var(--paper-050);
  --action-ghost-fg:var(--pine-700);
  --focus-ring:var(--ochre-500);

  /* ---- Families ---- */
  --font-display:"Wild Pines Park","Oswald","Trebuchet MS",sans-serif;
  --font-label:"Parkland Rounded","Oswald","Arial Narrow",sans-serif;
  --font-script:"Parkland Script","Segoe Script",cursive;
  --font-brush:"Parkland Brush","Bradley Hand",cursive;
  --font-body:Georgia,"Gelasio","Times New Roman",serif;

  /* ---- Weights ---- */
  --fw-body:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-display:800;

  /* ---- Fluid type scale ---- */
  --fs-hero:clamp(2.5rem,1.6rem + 4.4vw,4.25rem);
  --fs-display:clamp(2rem,1.45rem + 2.6vw,3.25rem);
  --fs-h1:clamp(1.75rem,1.45rem + 1.4vw,2.5rem);
  --fs-h2:clamp(1.4rem,1.24rem + 0.8vw,1.875rem);
  --fs-h3:1.375rem;
  --fs-lg:1.1875rem;
  --fs-body:1.0625rem;
  --fs-sm:0.9375rem;
  --fs-xs:0.8125rem;
  --fs-eyebrow:0.8125rem;

  /* ---- Line heights / tracking ---- */
  --lh-tight:1.02; --lh-snug:1.2; --lh-body:1.6;
  --ls-display:0.005em; --ls-eyebrow:0.16em; --ls-label:0.06em;

  /* ---- Spacing (4px grid) ---- */
  --space-1:4px;  --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:20px; --space-6:24px;  --space-8:32px;  --space-10:40px;
  --space-12:48px;--space-16:64px; --space-20:80px; --space-24:96px;
  --space-32:128px;

  /* ---- Layout ---- */
  --container-max:1180px;
  --container-text:68ch;
  --gutter:clamp(20px,4vw,36px);
  --section-y:clamp(48px,7vw,80px);

  /* ---- Radii / borders / shadows ---- */
  --radius-sm:3px; --radius-md:6px; --radius-lg:10px; --radius-pill:999px;
  --border-1:1px; --border-2:2px;
  --shadow-xs:0 1px 2px rgba(42,38,32,.10);
  --shadow-sm:0 2px 6px rgba(42,38,32,.12);
  --shadow-md:0 6px 16px rgba(42,38,32,.14);
  --shadow-lg:0 14px 34px rgba(42,38,32,.18);

  /* ---- Motion ---- */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:120ms; --dur-base:200ms;
}