/* ============================================================
   TAF Design Tokens — single source of truth
   Sampled from 09. Website/Homepage/TAF_Homepage-01.jpg
   WordPress port: these map 1:1 to theme.json settings.color /
   settings.typography presets. Keep ALL brand values here only.
   ============================================================ */
:root {
  /* ---- Brand colors ------------------------------------- */
  --c-cream:        #FAF3E9; /* primary page background        */
  --c-cream-warm:   #F6E9D7; /* header / warm panels           */
  --c-cream-soft:   #F8EBD9; /* subtle alt background          */
  --c-cream-pale:   #FBF5ED; /* light warm cream — About arch-cards band (pattern behind, pending) */
  --c-tan:          #EADAC4; /* warm tan — Events category-tile band base (under the cream squiggle pattern) */
  --c-mist:         #F4F5F7; /* cool near-white — Services service-cards on the blue-pale band */
  --c-ivory:        #FDFDF3; /* palest yellow-green ivory — Services steps band */
  --c-sage-pale:    #EFEED0; /* pale sage-khaki — Speaking "Join An Event" band [provisional] */
  --c-mint:         #F6FFD7; /* pale mint-lime panel (assessment section) */
  --c-olive:        #36441F; /* dark sections, footer, headings*/
  --c-olive-deep:   #2A3419; /* deepest olive (hovers)         */
  --c-olive-mid:    #6E7D33; /* mid olive-green (service card 1)*/
  --c-espresso:     #2C1F17; /* darkest warm brown — dark CTA buttons (.btn--dark) */
  --c-lime:         #D6D82A; /* PRIMARY accent: buttons + bands*/
  --c-lime-deep:    #C2C520; /* lime hover                     */
  --c-orange:       #E9682D; /* accent sections + highlights   */
  --c-orange-deep:  #D2541C; /* orange hover                   */
  --c-blue:         #A8B8C7; /* PRIMARY brand blue: hero panel, used throughout */
  --c-blue-deep:    #8E9FB0; /* darker blue (borders / hovers)  */
  --c-blue-pale:    #DCE5EB; /* pale blue-gray: newsletter wash (lighter than the SVG brush #C6DEEE so the stroke reads) */
  --c-lime-acid:      #AAAD17; /* acid lime-green: card 1 band + button */
  --c-lime-acid-wash: rgba(207, 210, 9, 0.36); /* card 1 body wash — #CFD209 @ 36% */
  /* Service-card body tints — a light wash of each card's accent band */
  --c-card-tint-1:  #E6E7CB; /* (unused since card 1 moved to lime-acid) */
  --c-card-tint-2:  #DCE4EB; /* under blue-deep band  (card 2)  */
  --c-card-tint-3:  #D9DCC9; /* under olive band      (card 3)  */
  --c-ink:          #282828; /* body text on light             */
  /* About audience-circle tints [provisional] — soft watercolor discs (texture SVG pending) */
  --c-tint-peach:   #F1D8BA; /* circle 1 — parent / youth leader   */
  --c-tint-lime:    #D9DA96; /* circle 2 — church / organization   */
  --c-tint-salmon:  #F2BD9D; /* circle 3 — donate / support        */
  --c-blush:        #DDAE8F; /* Speaking hero overlay — dusty peach-rose multiply wash */
  --c-white:        #FFFFFF;
  --c-muted:        #6E6A60; /* secondary text on light        */

  /* ---- Semantic roles (reference the brand colors) ------ */
  --color-bg:           var(--c-cream);
  --color-text:         var(--c-ink);
  --color-heading:      var(--c-olive);
  --color-accent:       var(--c-lime);
  --color-on-accent:    var(--c-olive);
  --color-link:         var(--c-orange);
  --color-link-hover:   var(--c-orange-deep);
  --color-on-dark:      var(--c-cream);

  /* ---- Typography --------------------------------------- */
  --font-display:     "Biennale", "Arial Black", system-ui, sans-serif;
  --font-display-alt: "Gabarito", var(--font-display); /* rounded display sans — Events tile labels, event headings/titles */
  --font-body:        "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent:      "Hello Imperfect", var(--font-display); /* textured headings */

  /* Fluid type scale (clamp: min, preferred-vw, max) */
  --fs-75:  0.75rem;                            /* 12px  micro caps (card / dark CTA buttons) */
  --fs-100: 0.8125rem;                          /* 13px  small labels */
  --fs-150: 0.875rem;                           /* 14px  nav links    */
  --fs-200: 0.9375rem;                          /* 15px  meta         */
  --fs-300: 1rem;                               /* 16px  body         */
  --fs-400: 1.125rem;                           /* 18px  lead body    */
  --fs-425: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem); /* 19→23px  emphasized lead / testimonial */
  --fs-450: clamp(1.375rem, 1rem + 1.6vw, 2rem); /* 22→32px section subtitle / large lead (≈48pt comp) */
  --fs-500: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);   /* card title */
  --fs-600: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);      /* h3        */
  --fs-700: clamp(2rem, 1.4rem + 3vw, 3.5rem);          /* h2        */
  --fs-800: clamp(2.6rem, 1.6rem + 4.6vw, 5rem);        /* h1/hero   */
  --fs-900: clamp(3rem, 1.6rem + 6.5vw, 6.5rem);        /* display   */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.65;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* ---- Spacing scale ------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); /* vertical section rhythm */

  /* ---- Layout ------------------------------------------- */
  --container-max: 1200px;
  --container-wide: 1360px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Radius / borders / shadow ------------------------ */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-xl: 44px;
  --radius-pill: 999px;
  --border: 1.5px solid var(--c-olive);
  --shadow-sm: 0 2px 8px rgba(40, 40, 40, 0.08);
  --shadow-md: 0 12px 30px rgba(40, 40, 40, 0.12);

  /* ---- Motion ------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 220ms;

  /* ---- Header ------------------------------------------- */
  --header-h: 150px;        /* desktop header height (overridden ≤1024px below) */
}