/* =====================================================================
   WELLSPRING COUNSELING + WELLNESS — Foundations
   Source: wellspring_brandguide.pdf (Typography + Color)
   Fonts (licensed brand files): "Bree" + "New Atten".
   NOTE: The @font-face declarations for these fonts are registered in
   functions.php (printed into wp_head) so they point at the live WP
   upload path — /wp-content/uploads/wellspring/fonts/ — at runtime.
   They are intentionally NOT declared here to avoid duplicate/shadowed
   @font-face rules.
   ===================================================================== */

:root {
  /* ---------- COLOR — PRIMARY (sage palette) ---------- */
  --color-forest:        #70806B;   /* Forest sage — primary brand green   */
  --color-sage:          #C4CEBA;   /* Soft sage — light tonal accent      */
  --color-sage-deep:     #5A6857;   /* Derived deeper sage (for hover/AA)  */
  --color-sage-pale:     #E2E7DB;   /* Derived pale sage (tints, surfaces) */

  /* ---------- COLOR — SECONDARY (warm earth tones) ---------- */
  --color-clay:          #BE8671;   /* Clay / warm amber — Sam's accent    */
  --color-terracotta:    #AF6D55;   /* Derived deeper terracotta           */
  --color-olive:         #AFBCA1;   /* Olive — soft secondary green        */

  /* ---------- COLOR — NEUTRALS ---------- */
  --color-stone:         #9D8D7E;   /* Warm stone — taupe                  */
  --color-sand:          #E6D9C3;   /* Warm sand — used as section bg      */
  --color-linen:         #FAF6EF;   /* Linen — page background / cream     */
  --color-linen-warm:    #F2EBDD;   /* Derived warm linen (alternates)     */
  --color-ink:           #2E2A24;   /* Near-black warm ink for body text   */
  --color-ink-soft:      #5C544A;   /* Warm slate for secondary text       */

  /* ---------- COLOR — SUPPORT (from brandguide neutrals) ---------- */
  --color-blue-grey:     #7A8F9A;   /* Brandguide neutral (cool support)   */

  /* ---------- SEMANTIC TOKENS ---------- */
  --bg-page:             var(--color-linen);        /* @kind color */
  --bg-surface:          #FFFFFF;
  --bg-elevated:         var(--color-linen-warm);   /* @kind color */
  --bg-section-warm:     var(--color-sand);          /* @kind color */
  --bg-section-deep:     var(--color-forest);        /* @kind color */
  --bg-mute:             var(--color-sage-pale);     /* @kind color */

  --fg-primary:          var(--color-ink);           /* @kind color */
  --fg-secondary:        var(--color-ink-soft);      /* @kind color */
  --fg-tertiary:         var(--color-stone);         /* @kind color */
  --fg-on-deep:          var(--color-linen);         /* @kind color */
  --fg-brand:            var(--color-forest);        /* @kind color */

  --accent-counseling:   var(--color-forest);     /* @kind color — Elizabeth, sage */
  --accent-coaching:     var(--color-clay);       /* @kind color — Sam, warm amber */

  --border-soft:         rgba(46, 42, 36, 0.08);
  --border-mid:          rgba(46, 42, 36, 0.16);
  --rule-warm:           rgba(112, 128, 107, 0.30);

  /* ---------- TYPOGRAPHY — FAMILIES ---------- */
  --font-heading:        "Bree", "Bree Serif", Georgia, serif;
  --font-body:           "New Atten", "Mulish", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-eyebrow:        "New Atten", "Mulish", sans-serif;

  /* ---------- TYPOGRAPHY — SCALE ---------- */
  --font-size-display:          clamp(48px, 6vw, 84px);
  --font-size-h1:               clamp(36px, 4.2vw, 56px);
  --font-size-h2:               clamp(28px, 3.2vw, 40px);
  --font-size-h3:               24px;
  --font-size-h4:               20px;
  --font-size-lead:             20px;
  --font-size-body:             17px;
  --font-size-small:            15px;
  --font-size-caption:          13px;
  --font-size-eyebrow:          12px;

  --font-lh-tight:            1.05;   /* @kind font */
  --font-lh-snug:             1.18;   /* @kind font */
  --font-lh-normal:           1.45;   /* @kind font */
  --font-lh-relaxed:          1.65;   /* @kind font */

  /* Eyebrow / subhead caps tracking — brandguide spec is "200 tracking"  */
  --font-tracking-eyebrow:    0.22em;     /* @kind font */
  --font-tracking-display:    -0.02em;    /* @kind font */

  /* ---------- SPACING ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- RADII ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- SHADOWS — soft, warm ---------- */
  --shadow-sm:   0 1px 2px rgba(46, 42, 36, 0.06);
  --shadow-md:   0 8px 24px rgba(46, 42, 36, 0.08);
  --shadow-lg:   0 18px 48px rgba(46, 42, 36, 0.12);
  --shadow-card: 0 2px 12px rgba(46, 42, 36, 0.06), 0 1px 2px rgba(46, 42, 36, 0.04);

  /* ---------- MOTION (inlined at point of use; not exposed as tokens
     because easing curves / durations fall outside the DS token kinds) ---------- */
}

/* =====================================================================
   SEMANTIC ELEMENT STYLES
   ===================================================================== */

html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--font-lh-relaxed);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .ws-display {
  font-family: var(--font-heading);
  font-weight: 400;          /* Bree Regular ships at 400 */
  color: var(--fg-primary);
  letter-spacing: var(--font-tracking-display);
  line-height: var(--font-lh-snug);
  text-wrap: balance;
  margin: 0;
}

.ws-display       { font-size: var(--font-size-display); line-height: var(--font-lh-tight); }
h1, .ws-h1        { font-size: var(--font-size-h1); }
h2, .ws-h2        { font-size: var(--font-size-h2); }
h3, .ws-h3        { font-size: var(--font-size-h3); line-height: var(--font-lh-snug); }
h4, .ws-h4        { font-size: var(--font-size-h4); line-height: var(--font-lh-snug); }

p, .ws-body {
  font-size: var(--font-size-body);
  line-height: var(--font-lh-relaxed);
  color: var(--fg-secondary);
  text-wrap: pretty;
  margin: 0;
}

.ws-lead {
  font-size: var(--font-size-lead);
  line-height: var(--font-lh-relaxed);
  color: var(--fg-secondary);
}

.ws-small   { font-size: var(--font-size-small); }
.ws-caption { font-size: var(--font-size-caption); color: var(--fg-tertiary); }

/* Eyebrow / Subhead — uppercase tracked sans, per brandguide */
.ws-eyebrow {
  font-family: var(--font-eyebrow);
  font-size: var(--font-size-eyebrow);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-eyebrow);
  color: var(--fg-tertiary);
}

/* Decorative scripture / mission strip — italic body */
.ws-mission {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--font-size-lead);
  line-height: var(--font-lh-relaxed);
  color: var(--fg-on-deep);
  text-wrap: balance;
}

a {
  color: var(--color-forest);
  text-decoration: underline;
  text-decoration-color: var(--rule-warm);
  text-underline-offset: 3px;
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1),
              text-decoration-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
a:hover {
  color: var(--color-sage-deep);
  text-decoration-color: var(--color-sage-deep);
}

/* Decorative thin rule used above mission/quote bands */
.ws-rule {
  width: 56px;
  height: 1px;
  background: var(--rule-warm);
  margin: 0 auto;
}
.ws-rule--on-deep { background: rgba(250, 246, 239, 0.45); }