/* ============================================================
   The Whole Child Autism Program — Design Tokens
   colors_and_type.css
   Source of truth for color + typography across the brand.
   Reconstructed from the live site (adorable-whole-child-thrive.base44.app).
   ============================================================ */

/* ---- Webfonts (best-guess matches — see README "Fonts" note) ---- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- CORE BRAND PALETTE ---------- */
  --navy:        #003061; /* primary dark — headings, footer, dark buttons */
  --navy-800:    #042a52;
  --navy-600:    #1f4a7a; /* hover / lifted navy */
  --teal:        #1abcac; /* primary CTA + interactive accent */
  --teal-600:    #14a99a; /* teal hover (darker) */
  --teal-700:    #0f8e82;
  --mint:        #8cf9d9; /* light aqua — accent ON DARK ONLY (hero) */
  --plum:        #7d2a86; /* secondary accent — emphasis, counseling pillar */
  --plum-600:    #6c2174;

  /* ---------- NEUTRALS / SURFACES ---------- */
  --cream:       #fcfaf8; /* page background (warm off-white) */
  --cream-alt:   #f4f1ec; /* alternating section band */
  --surface:     #ffffff; /* cards, forms */
  --line:        #e7e3dd; /* hairline borders on cream */
  --line-card:   #ececef; /* borders inside white cards */

  /* ---------- TEXT ---------- */
  --ink:         #003061; /* heading ink = navy */
  --body:        #56657c; /* body copy — muted slate */
  --body-strong: #2c3d54; /* emphasised body */
  --muted:       #8a96a6; /* captions, placeholders, disclaimers */
  --on-dark:     #eef3f8; /* text on navy */
  --on-dark-dim: #9fb4c9; /* secondary text on navy */

  /* ---------- PILLAR TINTS (3 program foundations) ---------- */
  --tint-teal:   #e2f4f0; /* Precision Medicine tile */
  --tint-blue:   #e7eef7; /* Parent Training tile */
  --tint-plum:   #f4e9f3; /* Child Counseling tile */
  --tint-mint:   #e2f6ef; /* check / success backing */

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---------- TYPE SCALE (desktop) ---------- */
  --fs-hero:     clamp(3rem, 6.2vw, 5.5rem);   /* 88px display hero */
  --fs-h1:       clamp(2.5rem, 4.6vw, 3.75rem); /* 60px section heads */
  --fs-h2:       clamp(2rem, 3vw, 2.75rem);     /* 44px */
  --fs-h3:       1.75rem;                        /* 28px card titles */
  --fs-lede:     1.375rem;                       /* 22px intro/subhead */
  --fs-body:     1.125rem;                        /* 18px */
  --fs-sm:       1rem;                            /* 16px */
  --fs-eyebrow:  0.8125rem;                       /* 13px uppercase label */

  --lh-tight:    1.08;
  --lh-snug:     1.25;
  --lh-body:     1.7;

  --tracking-eyebrow: 0.18em;

  /* ---------- RADII ---------- */
  --r-sm:   8px;
  --r-md:   12px;   /* inputs, FAQ rows */
  --r-lg:   18px;   /* cards */
  --r-xl:   24px;   /* large feature cards */
  --r-pill: 999px;  /* buttons */

  /* ---------- SHADOWS (soft, low, navy-tinted) ---------- */
  --shadow-xs: 0 1px 2px rgba(0,48,97,0.05);
  --shadow-sm: 0 2px 10px rgba(0,48,97,0.05);
  --shadow-md: 0 8px 28px rgba(0,48,97,0.07);
  --shadow-lg: 0 18px 48px rgba(0,48,97,0.10);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  220ms;

  /* ---------- LAYOUT ---------- */
  --container: 1180px;
  --section-y: clamp(64px, 9vw, 120px);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Reference recipes — apply via class or copy into components.
   ============================================================ */

.wc-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--teal);
}
.wc-eyebrow--plum { color: var(--plum); }
.wc-eyebrow--mint { color: var(--mint); }

.wc-hero {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wc-hero em, .wc-accent-italic {
  font-style: italic;
  font-weight: 500;
  color: var(--plum);
}

.wc-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--ink);
}
.wc-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.wc-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.wc-lede {
  font-family: var(--font-sans);
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--body);
}
.wc-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--body);
}
.wc-body strong { color: var(--body-strong); font-weight: 700; }

/* ---- Buttons ---- */
.wc-btn {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-sm);
  border: none;
  border-radius: var(--r-pill);
  padding: 1rem 2rem;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.wc-btn--teal { background: var(--teal); color: #fff; }
.wc-btn--teal:hover { background: var(--teal-600); transform: translateY(-1px); }
.wc-btn--navy { background: var(--navy); color: #fff; padding: 1.15rem 2.75rem; font-size: 1.0625rem; }
.wc-btn--navy:hover { background: var(--navy-600); transform: translateY(-1px); }
.wc-btn--ghost { background: transparent; color: var(--navy); }
.wc-btn:disabled { background: #9fb0c4; cursor: not-allowed; transform: none; }

/* ---- Cards ---- */
.wc-card {
  background: var(--surface);
  border: 1px solid var(--line-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

/* ---- Inputs ---- */
.wc-input {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--body-strong);
  background: #fff;
  border: 1px solid #d8d4ce;
  border-radius: var(--r-md);
  padding: 0.85rem 1rem;
  width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wc-input::placeholder { color: var(--muted); }
.wc-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(26,188,172,0.16); }
.wc-label { font-family: var(--font-sans); font-weight: 700; color: var(--body-strong); font-size: var(--fs-sm); }