/* ============================================================
   TOKENS.CSS — Design tokens only
   Ongwacho Cherop Associates & Advocates
   ★ EDIT HERE TO RETHEME — all values cascade from this file
============================================================ */

:root {
  /* ── Colour — Primary (Burgundy) ── */
  --color-primary:    #7A0E2E;
  --color-primary-dk: #5C0A22;
  --color-primary-lt: #9B1840;

  /* ── Colour — Accent (Gold) ── */
  --color-accent:     #C9A961;
  --color-accent-lt:  #DEC07A;
  --color-accent-dk:  #A8873D;

  /* ── Colour — Neutrals ── */
  --color-cream:      #FAF6EF;
  --color-cream-warm: #F3EDE1;
  --color-ink:        #1A1A1A;
  --color-ink-soft:   #3A3330;
  --color-ink-muted:  #6B6460;
  --color-white:      #FFFFFF;
  --color-on-dark-muted: rgba(250, 246, 239, 0.7);  /* secondary text on charcoal sections: 8.4:1 on --color-ink */

  /* ── Colour — UI ── */
  --color-border:     rgba(122, 14, 46, 0.12);
  --color-border-lt:  rgba(201, 169, 97, 0.25);
  --color-overlay:    rgba(26, 10, 8, 0.55);
  /* Hero scrim: burgundy at 86%, over the hero photo at <=900px (home and the four inner pages).
     A literal, not color-mix(): color-mix computes to color(srgb ...), not byte-identical to the rgba the home hero used. */
  --hero-scrim:       rgba(92, 10, 34, 0.86);

  /* ── Typography ── */
  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body:    'Montserrat', sans-serif;

  /* ── Type scale ── */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.5rem;
  --fs-4xl:  3.5rem;
  --fs-5xl:  5rem;

  /* ── Spacing ── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  4rem;
  --space-xl:  7rem;

  /* ── Layout tokens: where each one is applied ──
     --space-gutter  side gutter of the one content column. Owned by .section (global.css) and by the padded
                     sections that do not nest a .section: values-full, social-impact (about.css), brew-team,
                     partner-feature, leadership-cta (leadership.css), cta-section (home.css), contact-main
                     (contact.css), plus mission-vision (about.css), whose inner .section is zeroed.
                     Not on hero, navbar, footer, card interiors, the contact form, the tab strip or the map header.
     --measure       max reading width (about 65 characters): .why-us__intro (about.css), .brew-team__intro and
                     .brew-team__closing, .partner-bio (leadership.css), .contact-form-col__sub (contact.css).
     --media-max-w   widest an in-column image gets. Defined; applied in the images prompt, not yet.
     --fs-title      section and column titles, <=899px (.section__title, global.css); column titles
                     (.section__title--inline) only <=719px. Desktop clamps are unchanged.
     --fs-title-long very long titles, <=899px, via .section__title--long (global.css).
     --fs-lead       italic serif lead paragraphs, <=899px: .about__text--lead (home.css), .brew-philosophy__lead
                     (about.css), .partner-bio--lead (leadership.css).
     --fs-body       Montserrat body prose, <=899px only: .about__text (home.css), .brew-philosophy__text (about.css),
                     .partner-bio (leadership.css).
     --lh-body       line-height of the same prose, <=899px.
  */
  /* ── Layout: column, measure, media, type scale ── */
  --space-gutter: 2rem;       /* side gutter of the single content column */
  --measure:      38rem;      /* reading width, about 65 characters */
  --media-max-w:  28rem;      /* widest an in-column image gets (replaces the 420px and 460px caps) */
  --fs-title:     clamp(2.25rem, 1.25rem + 8.6vw, 3.5rem);   /* section and column titles at <=899px: 56px from 419px up */
  --fs-lead:      clamp(1.25rem, 1.15rem + 1vw, 1.375rem);   /* italic serif lead: 22px from ~380px up */
  --fs-body:      clamp(1rem, 0.85rem + 1vw, 1.0625rem);     /* body copy: 17px from ~300px up */
  --fs-title-long: clamp(1.5rem, 16.4vw - 1.34rem, 2.5rem);     /* very long titles (modifier .section__title--long) at <=899px */
  --lh-body:      1.9;

  /* ── Layout ── */
  --container-w: 1200px;
  --nav-max-w:   1400px;
  --nav-height:  80px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;

  /* ── Shadows ── */
  --shadow-sm:  0 2px 8px rgba(122, 14, 46, 0.08);
  --shadow-md:  0 4px 20px rgba(122, 14, 46, 0.12);
  --shadow-lg:  0 8px 40px rgba(122, 14, 46, 0.18);

  /* ── Easing ── */
  --ease-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-med:  400ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-slow: 700ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Z-index ── */
  --z-base:      1;
  --z-above:     10;
  --z-nav:       100;
  --z-drawer:    200;
  --z-overlay:   150;
  --z-fab:       250;
  --z-preloader: 9999;
}