/* ==========================================================================
   GROUNDING WITH KEISHA — BRAND KIT (design tokens)
   Warm & hopeful. Edit values here; the whole site updates.
   ========================================================================== */

:root {
  /* ---- Brand colors (from Keisha brand kit v1) --------------------------
     The kit specifies 3 colors; cream/charcoal neutrals are derived here to
     complete a usable system. Variable names kept for stability.
       Primary  #6D7567 sage-gray   →  --sage*
       Accent   #A38044 gold/ochre  →  --terracotta*  (calls-to-action)
       Second.  #8F7C63 taupe       →  --taupe*
  ----------------------------------------------------------------------- */
  --sage:          #6D7567;   /* kit primary — headers, brand, deep sections */
  --sage-deep:     #555C50;   /* hovers, footer */
  --sage-soft:     #8C9486;   /* muted accents, lines */
  --sage-tint:     #E3E5DE;   /* soft fills */

  --terracotta:      #A38044;  /* kit accent — calls-to-action, highlights */
  --terracotta-deep: #8A6A34;  /* CTA hover */
  --terracotta-tint: #ECE3D0;  /* soft fills */

  --taupe:       #8F7C63;   /* kit secondary — supporting accent */
  --taupe-tint:  #E8E1D5;

  --ocean:       #4F7184;   /* added accent — the calm blue Keisha loves */
  --ocean-deep:  #3C5667;   /* deeper blue for icons / text */
  --ocean-tint:  #DDE7EC;   /* soft blue fills */

  --cream:       #EFEBE3;   /* page background (kit greige) */
  --cream-warm:  #E7E0D4;   /* alternate sections */
  --bone:        #F8F5EF;   /* cards / surfaces */

  --charcoal:      #2C2A25;  /* primary text */
  --charcoal-soft: #54504A;  /* secondary text */
  --charcoal-mute: #847D72;  /* captions, meta */

  --white: #ffffff;

  /* ---- Semantic roles (use these in components) ---- */
  --bg:            var(--cream);
  --bg-alt:        var(--cream-warm);
  --surface:       var(--bone);
  --text:          var(--charcoal);
  --text-muted:    var(--charcoal-soft);
  --text-subtle:   var(--charcoal-mute);
  --primary:       var(--sage);
  --primary-deep:  var(--sage-deep);
  --accent:        var(--terracotta);
  --accent-hover:  var(--terracotta-deep);
  --line:          color-mix(in srgb, var(--sage) 18%, transparent);

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale (min 320px → max 1200px) */
  --step--1: clamp(0.83rem, 0.78rem + 0.22vw, 0.94rem);
  --step-0:  clamp(1rem,    0.95rem + 0.30vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.55vw, 1.50rem);
  --step-2:  clamp(1.44rem, 1.25rem + 0.95vw, 2.00rem);
  --step-3:  clamp(1.73rem, 1.40rem + 1.60vw, 2.75rem);
  --step-4:  clamp(2.07rem, 1.55rem + 2.55vw, 3.75rem);
  --step-5:  clamp(2.49rem, 1.65rem + 4.10vw, 5.00rem);

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.65;

  /* ---- Spacing scale ---- */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* ---- Layout ---- */
  --container:   1180px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius:    16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Shadows (warm-tinted) ---- */
  --shadow-sm: 0 1px 2px rgba(58, 54, 46, 0.06), 0 2px 6px rgba(58, 54, 46, 0.06);
  --shadow:    0 8px 24px rgba(58, 54, 46, 0.10), 0 2px 6px rgba(58, 54, 46, 0.06);
  --shadow-lg: 0 24px 60px rgba(58, 54, 46, 0.16), 0 8px 20px rgba(58, 54, 46, 0.08);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.6s;
}