/* Purewyn design tokens — Color System 2026 v1.0 + Type Cheat Sheet v1.0
   Canonical. Do not add hues. Do not drift the beige. */

:root {
  /* Core Four (locked) */
  --beige: #F7F3E4;   /* primary page background */
  --green: #245131;   /* brand: headlines, CTAs, accents */
  --white: #FFFFFF;
  --black: #000000;

  /* 2026 accent — Clay. <=5% of any layout. Never a second brand color. */
  --clay: #A85636;
  --clay-tint: #C99A65;   /* fills only, never text */
  --clay-shade: #7E3E26;

  /* Supporting greens (UI states, tints, depth) */
  --green-mist: #DAF1EA;
  --green-pale: #C9DBC4;
  --green-light: #A6BBA1;
  --green-mid: #6E997A;
  --green-deep: #2F5536;

  /* Supporting neutrals */
  --cream: #EBE5D8;        /* surfaces, image placeholders */
  --cream-dark: #D8D2C5;   /* card surfaces */
  --cream-darker: #BCBAB1; /* dividers, borders */
  --ink: #1C1212;          /* body text */

  /* Type families — one job per family */
  --font-wordmark: "Druk Wide", sans-serif;      /* wordmark only */
  --font-display: "Druk", sans-serif;            /* headlines, UPPERCASE, weight 800 */
  --font-banner: "Druk Condensed", sans-serif;   /* vertical/banner, weight 900, ~10% use */
  --font-body: "Inter", sans-serif;              /* all digital body + UI */
  --font-whisper: "Fraunces", serif;             /* italic only, one moment per layout */
  /* Poppins = physical packaging only. NEVER on this site. */
}

/* Type scale (web hierarchy) */
.display-xl  { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 88px; line-height: 1.0;  letter-spacing: -0.015em; }
.h1-hero     { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 56px; line-height: 1.05; letter-spacing: -0.01em; }
.h2-subhead  { font-family: var(--font-body); font-weight: 300; font-size: 40px; line-height: 1.15; letter-spacing: -0.025em; }
.h3-section  { font-family: var(--font-body); font-weight: 500; font-size: 28px; line-height: 1.25; letter-spacing: -0.015em; }
.h4-sub      { font-family: var(--font-body); font-weight: 600; font-size: 20px; line-height: 1.3;  letter-spacing: -0.01em; }
.body        { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.65; }
.body-small  { font-family: var(--font-body); font-weight: 400; font-size: 13px; line-height: 1.6; }
.caption     { font-family: var(--font-body); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; }
.eyebrow     { font-family: var(--font-body); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--green); }

/* WCAG-approved pairings — the ONLY allowed fg/bg combinations.
   Build all colored surfaces through these utilities. */
.pair-green-on-beige { color: var(--green); background: var(--beige); } /* AAA 8.2 — signature */
.pair-beige-on-green { color: var(--beige); background: var(--green); } /* AAA 8.2 — inverse/headers */
.pair-white-on-green { color: var(--white); background: var(--green); } /* AAA 9.2 — UI text */
.pair-black-on-beige { color: var(--black); background: var(--beige); } /* AAA 18.9 — body */
.pair-white-on-clay  { color: var(--white); background: var(--clay);  } /* AA 5.2 — sale tags/CTA */
.pair-clay-on-beige  { color: var(--clay);  background: var(--beige); } /* AA 4.7 — accent text */
/* FORBIDDEN (contrast fails): black-on-green 2.3, clay-on-green 1.8, clay-tint-on-beige 2.6. Do not create these. */

/* Buttons */
.btn-primary   { /* dark green filled pill, white text — ORDER NOW class CTAs */ }
.btn-secondary { /* cream/white filled pill, dark green text */ }
.btn-tertiary  { /* text link with arrow → */ }

/* Image placeholder slot */
.image-slot { background: var(--cream); border: 1px solid var(--cream-darker); }