/* =========================================================================
   World Heritage Trust — Design Tokens
   Nurturing Human Potential. Enabling Flourishing Communities.
   Drop this file in and reference via var(--wht-*). Tailwind config mirror
   is provided in HANDOFF.md.
   ========================================================================= */

:root {
  /* ---- Brand: Sage (the logo green is --wht-sage-600 / #556953) ---- */
  --wht-sage-900: #20291D;
  --wht-sage-800: #2E382A;   /* deep forest — dark surfaces, footer */
  --wht-sage-700: #41513C;
  --wht-sage-600: #556953;   /* PRIMARY brand green (logo) */
  --wht-sage-500: #6B7E63;
  --wht-sage-400: #899A7F;
  --wht-sage-300: #B0BDA5;
  --wht-sage-200: #CDD6C3;   /* tints, borders on sage */
  --wht-sage-100: #E4EADD;
  --wht-sage-50:  #EFF2EA;   /* sage wash background */

  /* ---- Warm neutrals: Sand / Cream (paper feel) ---- */
  --wht-ink:       #23271E;  /* primary text — warm near-black green */
  --wht-stone-700: #4A4E42;  /* strong secondary text */
  --wht-stone-500: #6E7264;  /* muted text, captions */
  --wht-stone-300: #A9AC9E;  /* disabled, hairline-on-cream */
  --wht-sand-200:  #DED7C5;  /* borders, dividers on cream */
  --wht-sand-100:  #EAE3D3;  /* secondary surface */
  --wht-cream-50:  #F6F2E9;  /* PRIMARY page background */
  --wht-white:     #FFFFFF;

  /* ---- Warm accents (use sparingly, for emphasis & warmth) ---- */
  --wht-clay-600:  #B06A43;  /* terracotta — CTAs that need warmth, highlights */
  --wht-clay-500:  #C07A4F;
  --wht-clay-100:  #F0DECF;  /* clay wash */
  --wht-gold-500:  #C39A45;  /* gold — awards, partner emphasis, accents */
  --wht-gold-100:  #EFE2BE;

  /* ---- Semantic ---- */
  --wht-success:   #4E7A4A;
  --wht-warning:   #C39A45;
  --wht-danger:    #A8443A;
  --wht-info:      #4B6B7A;

  /* ---- Typography ---- */
  --wht-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;   /* headings/display — matches logo wordmark */
  --wht-font-sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; /* body & UI */

  --wht-text-display: 56px;   /* line-height 1.05, weight 600 */
  --wht-text-h1:      44px;   /* 1.1 / 600 */
  --wht-text-h2:      32px;   /* 1.15 / 600 */
  --wht-text-h3:      24px;   /* 1.25 / 600 */
  --wht-text-h4:      20px;   /* 1.3 / 600 */
  --wht-text-lead:    19px;   /* 1.6 / 400 — intro paragraphs */
  --wht-text-body:    17px;   /* 1.65 / 400 */
  --wht-text-sm:      15px;   /* 1.55 / 400 */
  --wht-text-xs:      13px;   /* 1.4 / 500 */
  --wht-text-eyebrow: 13px;   /* uppercase, weight 600, letter-spacing .14em */

  /* ---- Spacing (4px base) ---- */
  --wht-space-1: 4px;   --wht-space-2: 8px;   --wht-space-3: 12px;
  --wht-space-4: 16px;  --wht-space-5: 24px;  --wht-space-6: 32px;
  --wht-space-7: 48px;  --wht-space-8: 64px;  --wht-space-9: 96px;
  --wht-space-10: 128px;

  /* ---- Radius ---- */
  --wht-radius-sm: 6px;    /* buttons, inputs */
  --wht-radius-md: 12px;   /* cards */
  --wht-radius-lg: 20px;   /* feature panels, media */
  --wht-radius-pill: 999px;

  /* ---- Elevation (warm, low, soft) ---- */
  --wht-shadow-sm: 0 1px 2px rgba(35,39,30,0.06);
  --wht-shadow-md: 0 6px 20px rgba(35,39,30,0.08);
  --wht-shadow-lg: 0 18px 44px rgba(35,39,30,0.12);

  /* ---- Layout ---- */
  --wht-container: 1200px;
  --wht-container-narrow: 760px;  /* reading width for prose */
  --wht-gutter: clamp(20px, 5vw, 80px);

  /* ---- Motion ---- */
  --wht-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --wht-dur: 240ms;
}