/* =====================================================================
   GreyStone Counseling — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow.
   Drop this into your site (e.g. /styles/tokens.css) and import once.
   ===================================================================== */

:root {
  /* ---- Brand palette ----
     Names are descriptive (used in product) + hex from brand sheet. */
  --gs-slate:       #4D5357;   /* Slate Gray — primary ink */
  --gs-slate-2:     #2B313A;   /* deeper slate, for headings */
  --gs-sage:        #8FA18D;   /* Sage Green — accent / nature */
  --gs-sage-deep:   #5B6444;   /* deeper sage for small caps */
  --gs-taupe:       #C9B7A6;   /* Warm Taupe — surfaces */
  --gs-peach:       #F2B27A;   /* Sunset Peach — warmth */
  --gs-peach-soft:  #F8E7CE;   /* sunrise wash */
  --gs-clay:        #C47A5A;   /* Clay Terracotta — CTA */
  --gs-clay-deep:   #A9603F;   /* CTA hover */

  /* ---- Neutrals ---- */
  --gs-cream:       #F4EFE6;   /* page background */
  --gs-paper:       #FAF6EE;   /* cards on cream */
  --gs-line:        #E2D8C8;   /* hairline divider */
  --gs-muted:       #8a8074;   /* secondary text */

  /* ---- Semantic ---- */
  --gs-bg:          var(--gs-cream);
  --gs-surface:     var(--gs-paper);
  --gs-text:        var(--gs-slate-2);
  --gs-text-soft:   var(--gs-slate);
  --gs-text-muted:  var(--gs-muted);
  --gs-accent:      var(--gs-clay);
  --gs-accent-soft: var(--gs-peach-soft);
  --gs-link:        var(--gs-sage-deep);

  /* ---- Type ---- */
  --gs-font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --gs-font-body:    'Outfit', 'Helvetica Neue', Helvetica, system-ui, sans-serif;
  --gs-font-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --gs-fs-xs:  0.8125rem;   /* 13 */
  --gs-fs-sm:  0.9375rem;   /* 15 */
  --gs-fs-base:1.0625rem;   /* 17 */
  --gs-fs-md:  1.125rem;    /* 18 */
  --gs-fs-lg:  1.25rem;     /* 20 */
  --gs-fs-xl:  1.5rem;      /* 24 — h3 */
  --gs-fs-2xl: 2rem;        /* 32 — h2 */
  --gs-fs-3xl: 2.75rem;     /* 44 — h1 */
  --gs-fs-4xl: 3.5rem;      /* 56 — biggest hero only */

  --gs-leading-tight: 1.1;
  --gs-leading-snug:  1.25;
  --gs-leading-body:  1.55;
  --gs-leading-loose: 1.7;

  --gs-track-tight: -0.02em;
  --gs-track-wide:  0.18em;   /* small caps */

  /* ---- Spacing (4px scale) ---- */
  --gs-s-1: 0.25rem;
  --gs-s-2: 0.5rem;
  --gs-s-3: 0.75rem;
  --gs-s-4: 1rem;
  --gs-s-5: 1.5rem;
  --gs-s-6: 2rem;
  --gs-s-7: 3rem;
  --gs-s-8: 4rem;
  --gs-s-9: 6rem;
  --gs-s-10: 8rem;

  /* ---- Radius / shadow / motion ---- */
  --gs-radius-sm: 4px;
  --gs-radius-md: 10px;
  --gs-radius-lg: 18px;
  --gs-radius-pill: 999px;

  --gs-shadow-sm: 0 1px 2px rgba(43,49,58,.06), 0 1px 1px rgba(43,49,58,.04);
  --gs-shadow-md: 0 6px 18px rgba(43,49,58,.08), 0 2px 4px rgba(43,49,58,.05);
  --gs-shadow-lg: 0 24px 60px rgba(43,49,58,.10), 0 6px 14px rgba(43,49,58,.06);

  --gs-ease: cubic-bezier(.2,.7,.2,1);
  --gs-dur-fast: 160ms;
  --gs-dur-base: 280ms;
  --gs-dur-slow: 600ms;

  /* ---- Layout ---- */
  --gs-content-w: 72rem;   /* 1152px */
  --gs-prose-w:   38rem;   /* 608px  */
}

/* Base typography defaults */
html { color-scheme: light; }
body {
  background: var(--gs-bg);
  color: var(--gs-text);
  font-family: var(--gs-font-body);
  font-size: var(--gs-fs-base);
  line-height: var(--gs-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .gs-display {
  font-family: var(--gs-font-display);
  color: var(--gs-slate-2);
  letter-spacing: var(--gs-track-tight);
  line-height: 1.15;
  font-weight: 600;
}
h1 { font-size: clamp(2rem, 4.5vw, var(--gs-fs-3xl)); line-height: 1.15; }
h2 { font-size: clamp(1.625rem, 3.2vw, var(--gs-fs-2xl)); line-height: 1.2; }
h3 { font-size: var(--gs-fs-xl); line-height: 1.25; }
h4 { font-size: var(--gs-fs-lg); line-height: 1.3; }

.gs-eyebrow {
  font-family: var(--gs-font-body);
  font-weight: 500;
  font-size: var(--gs-fs-xs);
  letter-spacing: var(--gs-track-wide);
  text-transform: uppercase;
  color: var(--gs-sage-deep);
}

/* Buttons */
.gs-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  box-sizing: border-box;
  padding: .85rem 1.5rem;
  border-radius: var(--gs-radius-pill);
  font-family: var(--gs-font-body);
  font-weight: 500;
  font-size: var(--gs-fs-sm);
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--gs-dur-fast) var(--gs-ease),
              transform var(--gs-dur-fast) var(--gs-ease),
              box-shadow var(--gs-dur-base) var(--gs-ease);
  border: 1px solid transparent;
}
.gs-btn--primary { background: var(--gs-clay); color: var(--gs-cream); }
.gs-btn--primary:hover { background: var(--gs-clay-deep); }
.gs-btn--ghost   { background: transparent; color: var(--gs-slate-2); border-color: var(--gs-slate); }
.gs-btn--ghost:hover { background: var(--gs-slate-2); color: var(--gs-cream); }

/* Icons */
.gs-icon { width: 1.5rem; height: 1.5rem; display: inline-block; vertical-align: middle; color: var(--gs-slate); }
.gs-icon--lg { width: 2.5rem; height: 2.5rem; }
.gs-icon--sage { color: var(--gs-sage-deep); }
.gs-icon--clay { color: var(--gs-clay); }

/* Hairline divider w/ small-caps label, like the brand sheet */
.gs-rule {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  color: var(--gs-sage-deep);
  font-size: var(--gs-fs-xs); letter-spacing: var(--gs-track-wide); text-transform: uppercase;
}
.gs-rule::before, .gs-rule::after { content: ""; height: 1px; background: var(--gs-line); }