/* ===================================================================
   RYAN ENGLEY | EXECUTIVE COACHING — Design Tokens
   Colors + Typography foundation. Import this everywhere.
   Font: Roboto (the real brand font), loaded from Google Fonts CDN.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Surfaces */
  --cream:            #F8F7F0;  /* primary background — warm off-white, everything sits on this */
  --cream-deep:       #F2F0E4;  /* slightly deeper cream for alternating sections */
  --white:            #FFFFFF;  /* floating cards */

  /* Gold — the signal color */
  --gold:             #FBCB3C;  /* primary accent: hero blobs, badges, CTA */
  --gold-strong:      #F8C810;  /* darker end of gold range (hover/press) */
  --gold-light:       #FCD344;  /* lighter end of gold range */
  --yellow-soft:      #F7E04F;  /* secondary yellow for larger fills + blobs */

  /* Sage — the grounding accent */
  --sage:             #729C90;  /* muted eucalyptus: heading accents, dark blobs */
  --sage-deep:        #5E8579;  /* hover/press for sage */
  --celadon:          #DEEACC;  /* pale pistachio: soft blob fills, section tints */

  /* Ink */
  --ink:              #1A1A1A;  /* near-black charcoal: headlines + body */
  --ink-70:           #4A4A4A;  /* secondary text */
  --ink-50:           #767676;  /* captions, meta */

  /* Logo neutrals (desaturated client logos) */
  --neutral-light:    #C8C8C8;
  --neutral-mid:      #A8A8A8;
  --neutral-dark:     #888888;

  /* Borders / hairlines */
  --line:             #E6E3D6;  /* hairline on cream */
  --line-gold:        #FBCB3C;  /* gold ring for numbered badges */

  /* ---------- SEMANTIC COLOR ROLES ---------- */
  --bg:               var(--cream);
  --bg-alt:           var(--cream-deep);
  --surface:          var(--white);
  --fg:               var(--ink);
  --fg-muted:         var(--ink-70);
  --fg-subtle:        var(--ink-50);
  --accent:           var(--gold);
  --accent-2:         var(--sage);
  --cta-bg:           var(--gold);
  --cta-bg-hover:     var(--gold-strong);
  --cta-fg:           var(--ink);

  /* ---------- TYPE FAMILY ---------- */
  --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---------- TYPE WEIGHTS ---------- */
  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;
  --w-black:   900;

  /* ---------- FLUID TYPE SCALE (1.250 major third) ---------- */
  --fs-display:   clamp(3rem, 6vw, 5rem);      /* 48 → 80  hero */
  --fs-h1:        clamp(2.25rem, 4vw, 3.25rem);/* 36 → 52  section title */
  --fs-h2:        clamp(1.75rem, 2.6vw, 2.25rem);/* 28 → 36 */
  --fs-h3:        1.5rem;    /* 24 */
  --fs-h4:        1.25rem;   /* 20 */
  --fs-lead:      1.375rem;  /* 22 — intro paragraphs */
  --fs-body:      1.0625rem; /* 17 — default body */
  --fs-small:     0.9375rem; /* 15 — captions */
  --fs-eyebrow:   0.8125rem; /* 13 — uppercase labels */
  --fs-stat:      clamp(3rem, 6vw, 4.5rem); /* big numbers */

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  /* ---------- TRACKING ---------- */
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-eyebrow: 0.14em;

  /* ---------- RADII ---------- */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;
  --r-blob: 42% 58% 62% 38% / 45% 40% 60% 55%; /* organic blob radius */

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

  /* ---------- SHADOWS (soft, warm, diffuse) ---------- */
  --shadow-sm:  0 1px 3px rgba(26,26,26,0.05);
  --shadow-md:  0 8px 24px rgba(26,26,26,0.07);
  --shadow-lg:  0 18px 50px rgba(26,26,26,0.10);
  --shadow-cta: 0 10px 24px rgba(251,203,60,0.40);

  /* ---------- MOTION ---------- */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 480ms;
}

/* ===================================================================
   SEMANTIC ELEMENT STYLES — apply with classes (.h1) or scope them.
   =================================================================== */
.font-brand { font-family: var(--font-sans); }

.display {
  font-family: var(--font-sans);
  font-weight: var(--w-black);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}
.h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}
.h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.lead {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}
.body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
}
.small {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--sage);
}
.stat {
  font-family: var(--font-sans);
  font-weight: var(--w-black);
  font-size: var(--fs-stat);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}