/* Hello, It's Me® — Colors & Type Foundations
   Sources: scrape branding (confidence 0.9 on colors) + logo SVG + site screenshots.
   Fonts: Nunito (body, rounded/accessible) + Bricolage Grotesque (display, warm/modern).
   Confirmed direction with user. Real site fonts unknown — these are accessibility-first.
*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  /* ── Brand purples (logo uses #9463A9; site nav #4A3265) ── */
  --him-purple-900: #2D1E3F;
  --him-purple-800: #3A2851;
  --him-purple-700: #4A3265;   /* PRIMARY (nav, headlines, deep fills) */
  --him-purple-600: #6B4690;
  --him-purple-500: #9463A9;   /* LOGO purple / illustration purple */
  --him-purple-400: #B485DA;
  --him-purple-300: #D0B3E8;
  --him-purple-200: #E6D4F2;
  --him-purple-100: #F3E9F9;
  --him-purple-50:  #FBF7FD;

  /* ── Orange (BRAND CTA — "Sign Up Now", "Book a Demo" pills are orange) ── */
  --him-orange-700: #C4721E;
  --him-orange-600: #E08A2E;
  --him-orange-500: #F6943E;   /* PRIMARY CTA orange */
  --him-orange-400: #FAA85E;
  --him-orange-300: #FDC48A;
  --him-orange-200: #FEDCB2;
  --him-orange-100: #FFEFD9;

  /* ── Magenta/pink (hero backgrounds, illustration fills) ── */
  --him-pink-700:   #B83478;
  --him-pink-600:   #D23F8E;
  --him-pink-500:   #E04B9E;   /* hero section background */
  --him-pink-400:   #EC6FB2;
  --him-pink-300:   #F4A5CE;
  --him-pink-200:   #FBD4E6;

  /* ── Teal (character sweater, illustration accent) ── */
  --him-teal-600:   #2A9B9B;
  --him-teal-500:   #3AB5B5;
  --him-teal-300:   #8AD5D5;

  /* ── Slate secondary ── */
  --him-slate-900: #1B2530;
  --him-slate-700: #304254;   /* SECONDARY */
  --him-slate-500: #5A6B7D;
  --him-slate-300: #A8B4C0;
  --him-slate-100: #E5EAEF;

  /* ── Warm neutrals ── */
  --him-cream:     #FAF6F0;
  --him-sand:      #F2EBDF;
  --him-paper:     #FFFFFF;
  --him-ink:       #1A1224;

  /* ── Legacy alias (kept so slides/index.html still works) ── */
  --him-coral:     var(--him-orange-500);
  --him-peach:     var(--him-orange-200);
  --him-mint:      #8ECDB5;
  --him-sky:       #A8C8E8;
  --him-sun:       #F6C35B;

  /* ── Status ── */
  --him-success:   #4FA87A;
  --him-warn:      #E89B3A;
  --him-danger:    #D9534F;
  --him-info:      var(--him-purple-500);

  /* ── Foregrounds / backgrounds (semantic) ── */
  --fg-1: var(--him-ink);          /* primary text */
  --fg-2: var(--him-slate-700);    /* secondary text */
  --fg-3: var(--him-slate-500);    /* tertiary / meta */
  --fg-on-purple: #FFFFFF;
  --fg-link: var(--him-purple-500);

  --bg-1: var(--him-paper);
  --bg-2: var(--him-cream);
  --bg-3: var(--him-purple-50);
  --bg-accent: var(--him-purple-500);
  --bg-primary: var(--him-purple-700);
  --bg-cta:    var(--him-orange-500);

  /* ── Type families ──
     Display font: Plus Jakarta Sans 800 (FES corporate font, geometric humanist).
     Body font: Nunito (rounded, accessibility-friendly for the IDD audience). */
  --font-display: "Plus Jakarta Sans", "Nunito", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Type scale (accessibility-generous — IDD audience needs large, clear type) ── */
  --fs-display-1: clamp(48px, 7vw, 88px);
  --fs-display-2: clamp(36px, 5vw, 64px);
  --fs-h1:        clamp(32px, 4vw, 48px);
  --fs-h2:        clamp(26px, 3vw, 36px);
  --fs-h3:        22px;
  --fs-h4:        18px;
  --fs-body-lg:   20px;   /* default body — larger than typical for accessibility */
  --fs-body:      18px;
  --fs-small:     16px;
  --fs-micro:     14px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* ── Radii (brand uses gentle, generous rounding — friendly not corporate) ── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ── Spacing (base 4px) ── */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ── Shadows (soft, warm — not crisp/techy) ── */
  --sh-1: 0 1px 2px rgba(74, 50, 101, .06), 0 1px 1px rgba(74, 50, 101, .04);
  --sh-2: 0 4px 12px rgba(74, 50, 101, .08), 0 2px 4px rgba(74, 50, 101, .04);
  --sh-3: 0 12px 32px rgba(74, 50, 101, .12), 0 4px 8px rgba(74, 50, 101, .06);
  --sh-4: 0 24px 60px rgba(74, 50, 101, .18), 0 8px 16px rgba(74, 50, 101, .08);
  --sh-glow: 0 0 0 8px rgba(157, 93, 205, .18);

  /* ── Borders ── */
  --bd-1: 1px solid var(--him-purple-100);
  --bd-2: 1px solid var(--him-purple-200);
  --bd-strong: 2px solid var(--him-purple-700);
}

/* ── Base element styles (semantic, use these directly) ── */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--him-purple-900);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--him-purple-800);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--him-purple-700);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

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

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--him-purple-500);
}

.display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--him-purple-900);
}

.display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--him-purple-900);
}

.meta {
  font-size: var(--fs-small);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--him-purple-700); }

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--him-purple-50);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  color: var(--him-purple-700);
}