/* ==========================================================================
   KCG DESIGN TOKENS
   Single source of truth. Every component pulls from these variables only —
   never hardcode a color, font, or radius value outside this file.

   Color values below are sampled directly from the official KCG logo
   (deep emerald green #075734, gold #D19E3A), not visually estimated.
   Variable NAMES were kept as-is from the previous indigo palette (e.g.
   --kcg-indigo) even though they now hold green values — renaming them
   would require touching every file that references them; only the values
   changed here, and the whole site re-themes from this one file.
   ========================================================================== */

:root {
  /* ---- Color: sampled from the KCG logo ---- */
  --kcg-white:        #FFFFFF;
  --kcg-black:        #000000;

  --kcg-ink:          #0B3D24;   /* headline text — dark forest green */
  --kcg-slate:        #5B6660;   /* body text — neutral, green-tinted grey */
  --kcg-muted:        #8B978F;   /* captions, placeholders */

  --kcg-indigo:        #0E7A46;   /* primary accent / CTA — brand green */
  --kcg-indigo-dark:   #075734;   /* hover / pressed — exact logo green */
  --kcg-indigo-tint:   #E3F1E9;   /* pale accent fill (badges, active nav) */

  /* gradient trio used on the primary button sweep — green shifting through gold */
  --kcg-gradient-1:    #12945A;
  --kcg-gradient-2:    #D19E3A;   /* logo gold */
  --kcg-gradient-3:    #0E7A46;

  --kcg-gold:          #D19E3A;   /* logo gold, used directly (squiggle, highlights) */
  --kcg-gold-dark:     #B37F22;

  --kcg-border:        #E7ECE8;
  --kcg-grey-5:        #F2F5F3;
  --kcg-grey-6:        #FAFBFA;

  --kcg-success:       #5FCC8B;
  --kcg-warning:       #FFB800;
  --kcg-danger:        #E14B4B;
  --kcg-tint-cream:    #FFFCF4;
  --kcg-tint-violet:   #E9F5EE;   /* repurposed as pale green wash for the page gradient */

  /* ---- Typography ---- */
  --font-display: 'Readex Pro', sans-serif;
  --font-body:    'Nunito Sans', sans-serif;
  --font-data:    'IBM Plex Mono', monospace;

  --fw-medium: 500;
  --fw-sbold:  600;
  --fw-bold:   700;
  --fw-ebold:  800;

  --fs-hero:    clamp(2.5rem, 5.5vw, 4.375rem);
  --fs-h1:      clamp(2rem, 4vw, 3.125rem);
  --fs-h2:      clamp(1.6rem, 3vw, 2.5rem);
  --fs-h3:      1.875rem;
  --fs-h4:      1.375rem;
  --fs-body:    1rem;
  --fs-small:   0.9rem;
  --fs-eyebrow: 0.8rem;

  /* ---- Spacing scale ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;

  /* ---- Radius ---- */
  --radius-pill: 999px;
  --radius-card: 24px;
  --radius-sm:   14px;

  /* ---- Shadow — tinted green instead of purple ---- */
  --shadow-card:  0 8px 30px rgba(7, 87, 52, 0.08);
  --shadow-float: 0 14px 40px rgba(14, 122, 70, 0.22);
  --shadow-nav:   0 6px 24px rgba(7, 87, 52, 0.09);

  /* ---- Gradient mesh background — pale green/cream, matching the logo ---- */
  --gradient-canvas: radial-gradient(circle at 15% 0%, var(--kcg-tint-violet) 0%, transparent 45%),
                      radial-gradient(circle at 85% 15%, var(--kcg-tint-cream) 0%, transparent 50%),
                      linear-gradient(180deg, var(--kcg-grey-6) 0%, #FFFFFF 100%);

  --container-width: 1180px;
}