/* HerBalance — Colors & Type
 * Single source of truth for the brand's foundational tokens.
 * Import this file at the top of any HTML artifact.
 */

@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;500;700;900&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  /* ───────────── Brand Colors ───────────── */
  /* Three-color brand. No more, no less. */
  --hb-purple:        #6a4c7a;   /* Deep purple — authority, headlines, weight */
  --hb-pink:          #fc6790;   /* Brand pink — the pulse; CTAs, accents, underlines */
  --hb-bg-pink:       #f9ecec;   /* Background pink — never clinical white */

  /* Tonal extensions (use sparingly, derived from the three) */
  --hb-purple-deep:   #523c5f;   /* Hover/pressed deep purple */
  --hb-purple-soft:   #8a6f99;   /* De-emphasized purple, secondary text on bg */
  --hb-pink-deep:     #e9527d;   /* Hover state for pink CTAs — subtle shift */
  --hb-pink-soft:     #fdb6c8;   /* Pink tint, dividers, soft fills */
  --hb-bg-pink-warm:  #f4e2e2;   /* A half-step deeper than bg, for stripes/sections */
  --hb-cream:         #fdf6f3;   /* Lightest neutral; alternative to bg-pink */

  /* Neutrals (warm, never cold grey) */
  --hb-ink:           #2b2230;   /* Body text — warm near-black with purple cast */
  --hb-ink-soft:      #5a4f60;   /* Secondary body */
  --hb-mute:          #8b8090;   /* Muted captions, labels */
  --hb-line:          #e8d8d8;   /* Hairline dividers, borders */
  --hb-line-strong:   #c9b6b6;
  --hb-white:         #ffffff;   /* Used sparingly — for cards on pink, button text */

  /* Semantic */
  --hb-success:       #5a8a6b;   /* Muted sage — never electric */
  --hb-warning:       #c98a4b;
  --hb-error:         #b8455a;

  /* ───────────── Foreground / Background semantics ───────────── */
  --fg-1: var(--hb-ink);          /* Primary body */
  --fg-2: var(--hb-ink-soft);     /* Secondary body */
  --fg-3: var(--hb-mute);         /* Tertiary / captions */
  --fg-display: var(--hb-purple); /* Headlines / display type */
  --fg-accent: var(--hb-pink);    /* The pulse */
  --fg-on-pink: #ffffff;          /* Text on pink CTA */
  --fg-on-purple: #ffffff;

  --bg-page: var(--hb-bg-pink);   /* Default page background */
  --bg-surface: var(--hb-cream);  /* Cards / raised surfaces */
  --bg-deep: var(--hb-purple);    /* Inverse / dark sections */

  /* ───────────── Typography ───────────── */
  --font-serif: "Frank Ruhl Libre", "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans:  "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — generous, unhurried */
  --fs-display:  clamp(48px, 6vw, 88px);   /* Hero headline */
  --fs-h1:       clamp(40px, 4.4vw, 64px);
  --fs-h2:       clamp(30px, 3.2vw, 44px);
  --fs-h3:       clamp(22px, 2vw, 28px);
  --fs-h4:       18px;
  --fs-lead:     20px;     /* Lead paragraph beneath headlines */
  --fs-body:     17px;     /* Default body */
  --fs-small:    15px;
  --fs-caption:  13px;
  --fs-eyebrow:  12px;     /* The rare ALL-CAPS accent moment */

  /* Line heights — comfortable */
  --lh-display:  1.05;
  --lh-heading:  1.15;
  --lh-body:     1.6;
  --lh-tight:    1.3;

  /* Letter spacing */
  --tracking-display:  -0.015em;  /* Subtle tighten on big serif */
  --tracking-body:     0;
  --tracking-eyebrow:  0.14em;    /* Open on the rare uppercase accent */

  /* Weights */
  --fw-serif-regular: 400;
  --fw-serif-medium:  500;
  --fw-serif-bold:    700;
  --fw-serif-black:   900;
  --fw-sans-light:    300;
  --fw-sans-regular:  400;
  --fw-sans-medium:   500;
  --fw-sans-semibold: 600;
  --fw-sans-bold:     700;

  /* ───────────── Spacing ───────────── */
  /* Generous. This audience has been overwhelmed; let things breathe. */
  --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;
  --sp-11: 160px;          /* Section padding on wide marketing pages */

  /* ───────────── Radii ───────────── */
  /* Buttons: somewhere between rounded and pill — never sharp, never pill */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;          /* Cards */
  --r-xl:  24px;
  --r-btn: 12px;          /* Primary button radius — the in-between */
  --r-pill: 999px;        /* Reserve for tags/chips, NOT primary buttons */

  /* ───────────── Borders ───────────── */
  --bw-hair: 1px;
  --bw-soft: 1.5px;
  --bw-emphasis: 2px;

  /* ───────────── Shadows ───────────── */
  /* Soft, warm-tinted. Never sharp or grey. */
  --shadow-xs: 0 1px 2px rgba(106, 76, 122, 0.06);
  --shadow-sm: 0 2px 8px rgba(106, 76, 122, 0.08);
  --shadow-md: 0 8px 24px rgba(106, 76, 122, 0.10);
  --shadow-lg: 0 20px 48px rgba(106, 76, 122, 0.14);
  --shadow-cta: 0 6px 18px rgba(252, 103, 144, 0.28);

  /* ───────────── Motion ───────────── */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.6,0,.2,1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ───────────── Layout ───────────── */
  --content-narrow: 720px;     /* Long-form reading */
  --content-default: 1080px;   /* Default content column */
  --content-wide: 1280px;      /* Marketing wide */
  --content-full: 1440px;
}

/* ───────────── Semantic element styles ───────────── */
/* Apply these classes (or rely on element selectors) for consistent type. */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, .display {
  font-family: var(--font-serif);
  color: var(--fg-display);
  font-weight: var(--fw-serif-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  margin: 0;
}

.display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-serif-medium); }
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-serif-bold); }

p, .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); margin: 0; text-wrap: pretty; }
.lead   { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-2); }
.small  { font-size: var(--fs-small); }
.caption { font-size: var(--fs-caption); color: var(--fg-3); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-sans-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* The pulse — pink underline / highlight on key words inside headlines */
.pulse {
  color: var(--fg-accent);
  font-style: italic;
  font-weight: inherit;
}
.pulse-underline {
  background-image: linear-gradient(transparent 65%, var(--hb-pink-soft) 65%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0 0.05em;
}

a { color: var(--fg-display); text-decoration: underline; text-decoration-color: var(--hb-pink); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--hb-pink); }

::selection { background: var(--hb-pink-soft); color: var(--hb-purple-deep); }