/* ============================================================
   BECOMING HER 2.0: IDENA — Design Tokens
   Host org: Pearls of Engineering
   Fonts: Sansita (display) + DM Sans (body) — both Google Fonts,
   the actual typefaces used in the source deck.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sansita:ital,wght@0,400;0,700;0,800;1,400;1,700;1,800;1,900&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400;1,9..40,500&display=swap');

:root {
  /* ---------- BRAND PALETTE ---------- */
  --magenta:        #E33286;  /* primary — dominant brand color (IDENA wordmark, buttons) */
  --magenta-bright: #E91E80;  /* hotter magenta accent */
  --magenta-deep:   #C41E6F;  /* pressed / shadowed magenta */
  --rose:           #BC4D92;  /* mid mauve-pink, secondary headers */
  --burgundy:       #6D1841;  /* deep maroon — depth, dark panels */
  --burgundy-2:     #5C1A3A;  /* alt deep maroon */

  /* ---------- INK & NEUTRALS ---------- */
  --ink:            #3A3C3F;  /* near-black body text */
  --black:          #000000;  /* silhouette / max contrast */
  --brown-1:        #3D3328;  /* warm dark brown, body on cream */
  --brown-2:        #775F4E;  /* warm muted brown, captions */
  --white:          #FFFFFF;

  /* ---------- TINTS & SURFACES ---------- */
  --pink-100:       #FDF3EE;  /* warmest off-white (bronze surface) */
  --pink-150:       #F9E7F7;  /* soft lilac-pink — primary section wash */
  --pink-200:       #F6D9EE;  /* pink card wash */
  --pink-300:       #F0A8D8;  /* mid pink (hero field) */

  /* ---------- SPONSOR TIER ACCENTS ---------- */
  --gold:           #D4AF37;  --gold-bg:   #FDF7E1;
  --silver:         #9A9A9A;  --silver-bg: #F5F5F7;
  --bronze:         #CD7F32;  --bronze-bg: #FDF3EE;

  /* ---------- SEMANTIC ROLES ---------- */
  --bg:             var(--pink-150);
  --bg-deep:        var(--burgundy);
  --surface:        var(--white);
  --fg1:            var(--ink);     /* primary text */
  --fg2:            var(--brown-2); /* secondary text */
  --fg-on-dark:     var(--white);
  --accent:         var(--magenta);
  --accent-press:   var(--magenta-deep);
  --line:           rgba(58,60,63,.14);
  --line-pink:      rgba(227,50,134,.22);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Sansita', Georgia, serif;   /* heavy display + italic tagline */
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* ---------- TYPE SCALE (clamped, mobile-first) ---------- */
  --t-hero:    clamp(3rem, 12vw, 7rem);      /* IDENA wordmark */
  --t-h1:      clamp(2.2rem, 7vw, 4rem);
  --t-h2:      clamp(1.7rem, 5vw, 2.75rem);
  --t-h3:      clamp(1.2rem, 3.5vw, 1.6rem);
  --t-lead:    clamp(1.05rem, 2.4vw, 1.35rem);
  --t-body:    1.0625rem;   /* 17px */
  --t-small:   0.875rem;
  --t-eyebrow: 0.8125rem;   /* uppercase labels */

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

  /* ---------- RADII ---------- */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm:  0 2px 6px rgba(109,24,65,.08);
  --shadow-md:  0 10px 30px rgba(109,24,65,.14);
  --shadow-lg:  0 24px 60px rgba(109,24,65,.20);
  --shadow-mag: 0 14px 34px rgba(227,50,134,.34);  /* magenta glow under CTAs */

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .28s;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
.ds-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-eyebrow);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--magenta);
}
.ds-hero {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-hero);
  line-height: .9;
  letter-spacing: -.01em;
  color: var(--magenta);
}
h1, .ds-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: -.005em;
  color: var(--ink);
  text-wrap: balance;
}
h2, .ds-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.08;
  color: var(--ink);
  text-wrap: balance;
}
h3, .ds-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.2;
  color: var(--ink);
}
.ds-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-lead);
  color: var(--rose);
  letter-spacing: .01em;
}
p, .ds-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg1);
  text-wrap: pretty;
}
.ds-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--fg1);
}
.ds-caption {
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--fg2);
}

/* ---------- BUTTONS ---------- */
.ds-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: .5em;
  padding: 15px 30px;
  border-radius: var(--r-pill);
  border: none; cursor: pointer;
  background: var(--magenta);
  color: var(--white);
  box-shadow: var(--shadow-mag);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ds-btn:hover  { background: var(--magenta-bright); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(227,50,134,.42); }
.ds-btn:active { background: var(--magenta-deep); transform: translateY(0) scale(.98); }

.ds-btn--ghost {
  background: transparent;
  color: var(--magenta);
  border: 2px solid var(--magenta);
  box-shadow: none;
}
.ds-btn--ghost:hover { background: var(--magenta); color: var(--white); }