/* ============================================================
   LAUNCH EXPERTS — Core Tokens
   colors_and_type.css
   ============================================================ */

/* -- Webfonts (Google Fonts CDN) ----------------------------- */
:root {
  /* ---- BRAND COLORS (from logo gradient) ---------------- */
  /* The logo uses a gradient flowing from a warm pink-red (top)
     into a deeper magenta-purple (bottom-right).              */
  --brand-pink:         #E23A6A;   /* primary hot pink (top of gradient) */
  --brand-pink-hover:   #C82E5A;
  --brand-magenta:      #B82A7E;   /* middle */
  --brand-purple:       #94287B;   /* bottom of gradient      */
  --brand-red-accent:   #DF2A61;   /* the wordmark red        */

  /* Signature gradient (logo). 135deg, pink → purple */
  --brand-gradient:     linear-gradient(135deg, #E23A6A 0%, #C72968 40%, #94287B 100%);
  --brand-gradient-h:   linear-gradient(90deg, #E23A6A 0%, #94287B 100%);
  --brand-gradient-soft:linear-gradient(135deg, #FDE7EF 0%, #F7DCE8 100%);

  /* ---- NEUTRALS ------------------------------------------ */
  --ink-900:            #101015;   /* near-black body         */
  --ink-800:            #1E1E26;
  --ink-700:            #2E2E3A;
  --ink-600:            #4A4A58;
  --ink-500:            #6B6B7A;   /* secondary text          */
  --ink-400:            #9A9AA8;
  --ink-300:            #C8C8D2;
  --ink-200:            #E4E4EB;   /* borders                 */
  --ink-100:            #F2F2F5;   /* surface alt             */
  --ink-50:             #F8F8FB;   /* app background          */
  --white:              #FFFFFF;

  /* ---- SEMANTIC ROLES ------------------------------------ */
  --fg-1:               var(--ink-900);     /* headings        */
  --fg-2:               var(--ink-600);     /* body            */
  --fg-3:               var(--ink-500);     /* secondary       */
  --fg-muted:           var(--ink-400);     /* captions        */
  --fg-on-brand:        var(--white);
  --fg-link:            var(--brand-pink);
  --fg-link-hover:      var(--brand-purple);

  --bg-app:             var(--white);
  --bg-surface:         var(--white);
  --bg-subtle:          var(--ink-50);
  --bg-inverse:         var(--ink-900);
  --bg-brand:           var(--brand-pink);
  --bg-brand-gradient:  var(--brand-gradient);

  --border-subtle:      var(--ink-200);
  --border-strong:      var(--ink-300);
  --border-brand:       var(--brand-pink);

  /* Feedback */
  --success:            #2EB872;
  --warning:            #F5A623;
  --danger:             #E24A3A;
  --info:               #3A8FE2;

  /* ---- TYPOGRAPHY ---------------------------------------- */
  --font-display:       'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body:          'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:          ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Size scale — agency-website proportions                  */
  --fs-display:         clamp(44px, 6vw, 72px);
  --fs-h1:              clamp(36px, 4.6vw, 56px);
  --fs-h2:              clamp(28px, 3.4vw, 40px);
  --fs-h3:              24px;
  --fs-h4:              20px;
  --fs-lead:            20px;
  --fs-body:            16px;
  --fs-small:           14px;
  --fs-caption:         12px;
  --fs-eyebrow:         13px;  /* uppercase labels */

  /* Weights — Poppins Bold for headings, regular for body    */
  --fw-light:           300;
  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;

  /* Line-height */
  --lh-tight:           1.08;
  --lh-snug:            1.25;
  --lh-normal:          1.55;
  --lh-loose:           1.75;

  /* Letter-spacing */
  --ls-tight:           -0.02em;
  --ls-normal:          0;
  --ls-wide:            0.06em;
  --ls-eyebrow:         0.14em;  /* for uppercase eyebrows */

  /* ---- SPACING ------------------------------------------- */
  --sp-0: 0;
  --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;

  /* ---- RADII --------------------------------------------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ---- SHADOWS ------------------------------------------- */
  --shadow-xs:   0 1px 2px rgba(16,16,21,0.04);
  --shadow-sm:   0 2px 6px rgba(16,16,21,0.06), 0 1px 2px rgba(16,16,21,0.04);
  --shadow-md:   0 8px 24px rgba(16,16,21,0.08), 0 2px 6px rgba(16,16,21,0.05);
  --shadow-lg:   0 20px 48px rgba(16,16,21,0.12), 0 6px 12px rgba(16,16,21,0.06);
  --shadow-brand:0 12px 32px rgba(226,58,106,0.28);
  --shadow-brand-lg:0 20px 48px rgba(148,40,123,0.32);

  /* ---- MOTION -------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;
  --dur-lift:   600ms;

  /* ---- LAYOUT -------------------------------------------- */
  --container-max: 1200px;
  --container-px:  24px;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.le-display, h1.le-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.le-h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.le-h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.le-h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.le-h4, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.le-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--brand-pink);
}

.le-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  font-weight: var(--fw-regular);
}

.le-body, p {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

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

.le-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}

.le-link, a.le-link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.le-link:hover { color: var(--fg-link-hover); border-bottom-color: currentColor; }

/* Gradient text — often used on big marketing hero words */
.le-gradient-text {
  background: var(--brand-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Mono for small chips / receipts */
code, .le-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}