/* ============================================================
   Karoleena — design tokens
   Drop into assets/css/_tokens.css and reference everywhere.
   ============================================================ */
:root{
  /* ---- section backgrounds (ONLY these) ---- */
  --c-olive:      #38362A;   /* Crop to Cloth, Publication, Footer */
  --c-terracotta: #945A34;   /* Alliance, Success Stories, Awards  */
  --c-grey:       #CDCDCD;   /* Impact, Vision Craft, Books        */
  --c-ecosystem:  #F7F5F2;   /* Ecosystem only                     */

  /* ---- brand accents ---- */
  --c-maroon:     #7D2726;
  --c-maroon-dk:  #6A201F;
  --c-ink:        #26251F;
  --c-muted:      #4A483F;
  --c-muted-lt:   #6E6A5C;
  --c-cream:      #EDE7D6;
  --c-cream-lt:   #F3ECDA;
  --c-peach:      #FAE0CB;
  --c-gold:       #A97A4F;
  --c-gold-lt:    #C59A6C;

  /* ---- hero (client style guide) ---- */
  --c-hero-bg:    #201713;
  --c-hero-logo:  #F4E3D3;
  --c-hero-nav:   #E7D8C8;
  --c-hero-head:  #EFDCCB;
  --c-hero-body:  #EEE5DD;
  --c-hero-btn:   #F2E5D7;

  /* ---- ecosystem stage accents (01 -> 04) ---- */
  --c-stage-1:    #7D2726;
  --c-stage-2:    #4C6A3C;
  --c-stage-3:    #1F5B63;
  --c-stage-4:    #5E6B32;
  --c-eco-frame:  #3E4A2E;

  /* ---- ecosystem venn ---- */
  --c-venn-1:     #7D2726;
  --c-venn-2:     #4A4F2A;
  --c-venn-3:     #4C6A3C;

  /* ---- type ---- */
  --f-sans:   'Poppins', system-ui, sans-serif;      /* headings + body   */
  --f-accent: 'Young Serif', serif;                  /* numerals, accents */
  --f-serif:  'Cormorant Garamond', serif;           /* hero H1           */
  --f-mont:   'Montserrat', sans-serif;              /* hero nav + CTA    */
  --f-inter:  'Inter', sans-serif;                   /* hero roles        */
  --f-script: 'Allura', cursive;                     /* logo              */

  /* ---- layout ---- */
  /* fluid: content fills laptop/desktop widths (client request), capped
     only on ultrawide monitors */
  --wrap-max:      1680px;
  --wrap-pad:      clamp(20px, 4vw, 64px);
  --section-pad-y: clamp(80px, 9vw, 110px);
  --radius:        12px;
  --radius-lg:     24px;

  /* ---- motion ---- */
  --ease:      cubic-bezier(.2,.7,.2,1);
  --dur-fast:  .2s;
  --dur-base:  .55s;
  --dur-slow:  .8s;
}

/* Text colour pairings — ALWAYS use the matching pair.
   A frequent bug is text inheriting a section colour onto a
   differently-coloured card (e.g. cream title on a grey award card). */
.on-dark  { color: var(--c-cream); }        /* olive / terracotta bg */
.on-dark h2, .on-dark h3 { color: var(--c-cream-lt); }
.on-light { color: var(--c-ink); }          /* grey / ecosystem bg   */
.on-light p { color: var(--c-muted); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}