/* =============================================================
   LAUNCH BABY — Colors, Type & Core Tokens
   -------------------------------------------------------------
   The LAUNCH BABY system is a high-contrast, high-energy editorial
   brand. Pink + blue + black, geometric bold display caps, mono
   labels for "proposal-document" energy, and a few neon glow
   treatments for the "Boom" moments.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bowlby+One&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600&display=swap');

:root {
  /* ---------- BRAND COLOR — primaries (from logo) ---------- */
  --lb-pink:        #EC008C;   /* hot magenta — "LAUNCH" */
  --lb-pink-deep:   #C7077A;   /* business-card / stationery pink */
  --lb-pink-soft:   #FFE4F3;   /* tint */
  --lb-blue:        #00AEEF;   /* cyan blue — "BABY"   */
  --lb-blue-deep:   #0086B8;
  --lb-blue-soft:   #DAF3FB;   /* tint (matches stationery bg) */
  --lb-black:       #0A0A0A;
  --lb-white:       #FFFFFF;

  /* ---------- NEUTRALS (warm-cool gray ramp) ---------- */
  --lb-ink:         #0A0A0A;
  --lb-ink-2:       #1A1A1F;   /* near-black surfaces */
  --lb-ink-3:       #2A2A30;
  --lb-gray-900:    #404048;
  --lb-gray-700:    #6A6A75;
  --lb-gray-500:    #9A9AA5;
  --lb-gray-300:    #D6D6DD;
  --lb-gray-200:    #E8E8ED;
  --lb-gray-100:    #F3F3F6;
  --lb-paper:       #FAFAF7;   /* warm off-white — "proposal paper" */
  --lb-paper-pink:  #FFEAF5;   /* pink-tint background */

  /* ---------- ACCENT / SEMANTIC ---------- */
  --lb-accent:      var(--lb-pink);
  --lb-accent-2:    var(--lb-blue);
  --lb-success:     #1BC47D;
  --lb-warn:        #FFB020;
  --lb-danger:      #FF3A4A;

  /* ---------- SIGNATURE GRADIENT / GLOW ---------- */
  --lb-gradient:           linear-gradient(90deg, var(--lb-pink) 0%, var(--lb-pink) 48%, var(--lb-blue) 52%, var(--lb-blue) 100%);
  --lb-gradient-smooth:    linear-gradient(90deg, var(--lb-pink) 0%, #B81FA8 50%, var(--lb-blue) 100%);
  --lb-gradient-vertical:  linear-gradient(180deg, var(--lb-pink) 0%, var(--lb-blue) 100%);
  --lb-glow-pink:          0 0 32px rgba(236, 0, 140, 0.55), 0 0 8px rgba(236, 0, 140, 0.9);
  --lb-glow-blue:          0 0 32px rgba(0, 174, 239, 0.55), 0 0 8px rgba(0, 174, 239, 0.9);
  --lb-glow-soft:          0 8px 40px rgba(236, 0, 140, 0.22);

  /* ---------- SEMANTIC SURFACES (light mode default) ---------- */
  --bg:             var(--lb-paper);
  --bg-elevated:    var(--lb-white);
  --bg-inverse:     var(--lb-black);
  --fg1:            var(--lb-ink);          /* primary text */
  --fg2:            var(--lb-gray-700);     /* secondary text */
  --fg3:            var(--lb-gray-500);     /* tertiary / labels */
  --fg-on-pink:     var(--lb-white);
  --fg-on-blue:     var(--lb-white);
  --fg-on-dark:     var(--lb-white);
  --border:         var(--lb-gray-300);
  --border-strong:  var(--lb-ink);
  --hairline:       rgba(10, 10, 10, 0.12);

  /* ---------- TYPE FAMILIES ----------
     Exact fonts extracted from the LAUNCH BABY proposal PDF.
     Bowlby One is the chunky display face used for headlines + the
     wordmark; Inter handles body; JetBrains Mono carries the
     numbered/labeled editorial metadata. */
  --font-display:   'Bowlby One', system-ui, -apple-system, sans-serif;
  --font-sans:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif:     'Playfair Display', 'Times New Roman', Georgia, serif;

  /* ---------- TYPE SCALE ---------- */
  --fs-mega:        clamp(72px, 11vw, 184px);  /* hero "BLAST." */
  --fs-display:     clamp(56px, 7vw, 112px);   /* page headlines */
  --fs-h1:          clamp(40px, 5vw, 64px);
  --fs-h2:          clamp(28px, 3.4vw, 42px);
  --fs-h3:          clamp(22px, 2.2vw, 28px);
  --fs-h4:          18px;
  --fs-body-lg:     20px;
  --fs-body:        16px;
  --fs-body-sm:     14px;
  --fs-caption:     12px;
  --fs-eyebrow:     11px;     /* tracked all-caps labels */

  /* ---------- WEIGHTS ---------- */
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semi:        600;
  --fw-bold:        700;
  --fw-black:       800;

  /* ---------- TRACKING ---------- */
  --tr-tight:       -0.03em;     /* mega display */
  --tr-snug:        -0.015em;    /* h1 / h2 */
  --tr-normal:      0;
  --tr-wide:        0.08em;      /* mono labels */
  --tr-wider:       0.18em;      /* "B L A S T .   B L O O M .   B O O M ." */
  --tr-widest:      0.32em;      /* eyebrow / proposal footer */

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight:       0.92;
  --lh-display:     1.02;
  --lh-heading:     1.12;
  --lh-body:        1.55;
  --lh-loose:       1.7;

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

  /* ---------- RADII ---------- */
  --radius-none:    0;
  --radius-xs:      4px;
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --radius-xl:      28px;
  --radius-pill:    999px;

  /* ---------- ELEVATION / SHADOWS ---------- */
  --shadow-xs:      0 1px 2px rgba(10, 10, 10, 0.06);
  --shadow-sm:      0 2px 6px rgba(10, 10, 10, 0.08);
  --shadow-md:      0 10px 28px rgba(10, 10, 10, 0.12);
  --shadow-lg:      0 24px 60px rgba(10, 10, 10, 0.18);
  --shadow-card:    0 18px 50px -10px rgba(10, 10, 10, 0.22), 0 2px 4px rgba(10, 10, 10, 0.06);
  --shadow-cta:     0 16px 40px -10px rgba(236, 0, 140, 0.55), 0 4px 8px rgba(0,0,0,0.18);

  /* ---------- MOTION ---------- */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:      cubic-bezier(0.2, 0.9, 0.2, 1.2);  /* slight overshoot */
  --dur-fast:       140ms;
  --dur-base:       240ms;
  --dur-slow:       420ms;
  --dur-marquee:    32s;        /* full loop for "BLAST. BLOOM. BOOM." ticker */
}

/* ============================================================
   DARK SURFACE OVERRIDE — opt-in via .lb-dark or data-theme=dark
   The brand is bright; dark is reserved for hero sections and
   "Boom" moments where the neon glow shines.
   ============================================================ */
.lb-dark, [data-theme="dark"] {
  --bg:           var(--lb-black);
  --bg-elevated:  var(--lb-ink-2);
  --bg-inverse:   var(--lb-white);
  --fg1:          var(--lb-white);
  --fg2:          rgba(255,255,255,0.72);
  --fg3:          rgba(255,255,255,0.48);
  --border:       rgba(255,255,255,0.16);
  --border-strong: var(--lb-white);
  --hairline:     rgba(255,255,255,0.16);
}

/* ============================================================
   SEMANTIC TYPE — drop-in classes
   ============================================================ */

.lb-mega {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-mega);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg1);
  text-wrap: balance;
}

.lb-display, h1.lb {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tight);
  color: var(--fg1);
  text-wrap: balance;
}

.lb-h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-snug);
  color: var(--fg1);
  text-wrap: balance;
}

.lb-h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-snug);
  color: var(--fg1);
}

.lb-h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--fg1);
}

.lb-h4, h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--fg1);
}

.lb-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg2);
}

p, .lb-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg2);
}

.lb-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--fg2);
}

.lb-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--fg3);
}

.lb-label {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg2);
}

.lb-tagline {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
}

.lb-mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
  color: var(--fg1);
}

/* ============================================================
   COLORED TYPE — wrap a word/letters to get the LAUNCH/BABY split
   ============================================================ */
.lb-pink { color: var(--lb-pink); }
.lb-blue { color: var(--lb-blue); }
.lb-grad {
  background: var(--lb-gradient-smooth);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* ============================================================
   BASE
   ============================================================ */
.lb-root, body.lb {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}