/* ============================================================
   SCENTSIBLE K9 TRAINING - DESIGN TOKENS
   Source of truth. Extracted from the live site (custom.css).
   Paste into Squarespace custom CSS, flyers, merch tooling, etc.
   ============================================================ */
:root{
  /* ---- CHARCOAL FAMILY (dark surfaces / ink) ---- */
  --charcoal:    #2d302a;   /* primary dark surface · body ink on light */
  --charcoal-2:  #232620;   /* deeper section background */
  --charcoal-3:  #1a1d18;   /* deepest · footer */

  /* ---- SAGE FAMILY (brand accent) ---- */
  --sage:        #818f6b;   /* PRIMARY brand color · buttons, links, heading <em> */
  --deep-moss:   #5f6b52;   /* darker sage · hover / pressed */
  --soft-sage:   #a9b29a;   /* light accent · eyebrows & accents on dark */

  /* ---- WARM NEUTRALS (light surfaces) ---- */
  --paper:       #e6e6e2;   /* light page background */
  --sand:        #d8d2c4;   /* warm neutral panel */
  --stone:       #c7c2b8;   /* hairline borders / muted */
  --white:       #fefefe;   /* light surface · text on dark */

  /* ---- TYPE FAMILIES ---- */
  --font-h:    'Barlow Condensed', sans-serif;  /* headings: 800, UPPERCASE */
  --font-sub:  'Libre Baskerville', serif;      /* subheads, pull-quotes (italic) */
  --font-body: 'Bitter', serif;                 /* body copy */

  /* ---- TYPE SCALE (fluid) ---- */
  --fs-h1:    clamp(44px, 6.5vw, 76px);
  --fs-h2:    clamp(34px, 5.5vw, 64px);
  --fs-h3:    clamp(20px, 2.5vw, 28px);
  --fs-lead:  19px;
  --fs-body:  17px;
  --fs-eyebrow: 11px;

  /* ---- TRACKING ---- */
  --track-h:       .02em;   /* h1/h2 */
  --track-h3:      .04em;
  --track-eyebrow: .18em;
  --track-btn:     .12em;

  /* ---- SHAPE & ELEVATION ---- */
  --radius:  2px;                              /* sharp, deliberate */
  --shadow:  0 8px 32px rgba(45,48,42,.12);    /* soft, single elevation */

  /* ---- SPACING RHYTHM ---- */
  --space-section: clamp(64px, 9vw, 120px);    /* vertical section padding */
  --space-cta:     84px;                        /* CTA strip padding */
  --maxw:          1160px;                       /* content max-width */
  --measure:       68ch;                         /* body line-length cap */
}