/* ==========================================================================
   Launch Industries — Colors & Type
   The single source of truth for foundational tokens.
   ========================================================================== */

/* ---------- Fonts ---------- */
/* PP Formula (Pangram Pangram) — primary brand typeface.
   Licensed via the included EULA for commercial use.

   IMPORTANT: each PP Formula OTF declares its weight INSIDE the family name
   (e.g. "PP Formula Narrow Semibold", "PP Formula Compressed"). For ergonomic
   `font-family: "PP Formula <subfamily>"; font-weight: <n>` usage, we declare
   each weight under BOTH its real family name (so it's directly addressable)
   AND a unified subfamily façade with proper weight metadata.

   Subfamily façades available:
     "PP Formula"             → 300, 500, 500i, 800
     "PP Formula Narrow"      → 400, 600 (Semibold)
     "PP Formula Condensed"   → 200, 600 (alias to Narrow Semibold), 900 (Compressed)
     "PP Formula Compressed"  → 900  (extreme condensed display)
     "PP Formula Extended"    → 500, 600 (SemiExtendedBold), 700
     "PP Formula SemiCondensed" → 100, 200, 200i, 500
     "MarketPro" / "Market Pro" → 400 (brush script)
*/

/* ----- PP Formula sans (default body face) ----- */
@font-face {
  font-family: "PP Formula Light";   /* real internal name */
  src: url("./assets/fonts/PPFormula-Light.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula";         /* unified façade */
  src: url("./assets/fonts/PPFormula-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula Medium";  /* real internal name */
  src: url("./assets/fonts/PPFormula-Medium.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula";         /* façade */
  src: url("./assets/fonts/PPFormula-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula Medium";  /* real internal name */
  src: url("./assets/fonts/PPFormula-MediumItalic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PP Formula";         /* façade */
  src: url("./assets/fonts/PPFormula-MediumItalic.otf") format("opentype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PP Formula Extrabold"; /* real internal name */
  src: url("./assets/fonts/PPFormula-Extrabold.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula";          /* façade */
  src: url("./assets/fonts/PPFormula-Extrabold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ----- PP Formula Narrow ----- */
@font-face {
  font-family: "PP Formula Narrow";   /* real internal name == façade */
  src: url("./assets/fonts/PPFormula-NarrowRegular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula Narrow Semibold"; /* real internal name */
  src: url("./assets/fonts/PPFormula-NarrowSemibold.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula Narrow";   /* façade weight 600 */
  src: url("./assets/fonts/PPFormula-NarrowSemibold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ----- PP Formula Condensed (Extralight) + Compressed (Black) ----- */
@font-face {
  font-family: "PP Formula Condensed Extralight";
  src: url("./assets/fonts/PPFormula-CondensedExtralight.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula Condensed";  /* façade */
  src: url("./assets/fonts/PPFormula-CondensedExtralight.otf") format("opentype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula Condensed Light";
  src: url("./assets/fonts/PPFormula-CondensedLightItalic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PP Formula Condensed";  /* façade */
  src: url("./assets/fonts/PPFormula-CondensedLightItalic.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}
/* The file labeled "CondensedBlack" actually contains the family
   "PP Formula Compressed" — an extreme display weight. Expose under both
   the real name and as Condensed weight 900 for ergonomic use. */
@font-face {
  font-family: "PP Formula Compressed";
  src: url("./assets/fonts/PPFormula-CondensedBlack.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula Condensed";  /* façade */
  src: url("./assets/fonts/PPFormula-CondensedBlack.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}
/* Bridge: the kit asks for "Condensed Semibold (600)" but no such cut ships.
   Map weight 600 of the Condensed façade to Narrow Semibold — the nearest
   Pangram cut by both width and weight. */
@font-face {
  font-family: "PP Formula Condensed";  /* façade weight 600 → Narrow Semibold */
  src: url("./assets/fonts/PPFormula-NarrowSemibold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ----- PP Formula Extended ----- */
@font-face {
  font-family: "PP Formula Extended Medium";
  src: url("./assets/fonts/PPFormula-ExtendedMedium.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula Extended";   /* façade */
  src: url("./assets/fonts/PPFormula-ExtendedMedium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula Extended Bold";
  src: url("./assets/fonts/PPFormula-ExtendedBold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula Extended";   /* façade */
  src: url("./assets/fonts/PPFormula-ExtendedBold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula Semi Extended Bold";
  src: url("./assets/fonts/PPFormula-SemiExtendedBold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula Extended";   /* façade weight 600 */
  src: url("./assets/fonts/PPFormula-SemiExtendedBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ----- Market Pro — brush script ----- */
/* Internal family is "MarketPro" (no space). Declare both spellings. */
@font-face {
  font-family: "MarketPro";
  src: url("./assets/fonts/MarketPro-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Market Pro";
  src: url("./assets/fonts/MarketPro-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ==========================================================================
   :root tokens
   ========================================================================== */
:root {
  /* ---------- Brand colors (sampled from the icon mark) ---------- */
  --li-yellow: #ffd100;     /* spark / energy */
  --li-red:    #f9465c;     /* signal / alert */
  --li-green:  #14d592;     /* growth / go */
  --li-teal:   #51d9dd;     /* clarity / cool */

  /* Collaboration blue — a 5th color, OUTSIDE the four-quadrant icon palette.
     Used when something needs extra oomph (a hero accent, a punchy CTA on a
     non-yellow surface, an emphasis pill). Never appears in the icon mark. */
  --li-blue:   #2d4dff;

  /* Tonal companions for hover / press / soft fills */
  --li-yellow-700: #d9b000;
  --li-yellow-100: #fff6cc;
  --li-red-700:    #d9304a;
  --li-red-100:    #ffd9de;
  --li-green-700:  #0fae77;
  --li-green-100:  #c9f4e2;
  --li-teal-700:   #2eb8bc;
  --li-teal-100:   #d6f5f6;
  --li-blue-700:   #1a35d9;
  --li-blue-100:   #d6deff;

  /* ---------- Neutrals (warm-cool ink, modernized) ---------- */
  --ink-1000: #0a0c10;      /* near-black, used for wordmark + body */
  --ink-900:  #14171d;
  --ink-800:  #1f242c;
  --ink-700:  #353c47;
  --ink-600:  #4f5763;
  --ink-500:  #6b7380;
  --ink-400:  #8f96a1;
  --ink-300:  #b8bdc5;
  --ink-200:  #dadde2;
  --ink-150:  #e8eaee;
  --ink-100:  #f1f2f5;
  --ink-50:   #f7f8fa;
  --ink-0:    #ffffff;

  /* A warm off-white the brand leans on for "paper" surfaces */
  --paper:    #fbf9f4;
  --paper-2:  #f4efe4;

  /* ---------- Semantic foreground / background ---------- */
  --fg-1: var(--ink-1000);   /* primary text */
  --fg-2: var(--ink-700);    /* secondary text */
  --fg-3: var(--ink-500);    /* tertiary / captions */
  --fg-inv: var(--ink-0);    /* text on dark / brand fills */

  --bg-1: var(--ink-0);      /* page */
  --bg-2: var(--ink-50);     /* subtle surface */
  --bg-3: var(--ink-100);    /* card */
  --bg-paper: var(--paper);  /* warm surface */
  --bg-ink:  var(--ink-1000);/* dark surface */

  --border-1: var(--ink-150);
  --border-2: var(--ink-200);
  --border-strong: var(--ink-1000);

  /* ---------- Semantic intent ---------- */
  --intent-primary: var(--ink-1000);   /* default actions are confident black */
  --intent-accent:  var(--li-yellow);  /* the "launch" yellow is the accent */
  --intent-success: var(--li-green);
  --intent-danger:  var(--li-red);
  --intent-info:    var(--li-teal);

  /* ---------- Type families ---------- */
  --font-sans:    "PP Formula", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "PP Formula Condensed", "PP Formula", system-ui, sans-serif;  /* CondensedBlack 900 — the headline face */
  --font-narrow:  "PP Formula Narrow", "PP Formula Condensed", "PP Formula", system-ui, sans-serif;
  --font-script:  "Market Pro", "Caveat Brush", "Permanent Marker", "Bradley Hand", cursive;  /* the brush-script accent — for "together" */
  --font-marker:  "Permanent Marker", "Market Pro", "Caveat Brush", cursive;                  /* the alternate hand — for words Market Pro can't render cleanly */
  --font-serif:   var(--font-script);  /* DEPRECATED alias — Market Pro is a script, not a serif. Kept for back-compat. */
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale (a major-third-ish, modernized) ---------- */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;
  --fs-112: 7rem;

  /* line-heights and tracking */
  --lh-tight:  1.04;
  --lh-snug:   1.18;
  --lh-base:   1.5;
  --lh-relax:  1.65;
  --tr-tight:  -0.02em;
  --tr-snug:   -0.01em;
  --tr-normal: 0;
  --tr-loose:  0.04em;
  --tr-wide:   0.12em;

  /* ---------- Spacing (4pt grid) ---------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- Radii ---------- */
  --r-0: 0;
  --r-2: 2px;
  --r-4: 4px;
  --r-8: 8px;
  --r-12: 12px;     /* default card */
  --r-16: 16px;
  --r-20: 20px;     /* hero card */
  --r-pill: 999px;

  /* ---------- Shadows (low-contrast, warm) ---------- */
  --shadow-1: 0 1px 0 rgba(10,12,16,0.04), 0 1px 2px rgba(10,12,16,0.06);
  --shadow-2: 0 2px 4px rgba(10,12,16,0.05), 0 8px 24px rgba(10,12,16,0.06);
  --shadow-3: 0 12px 32px rgba(10,12,16,0.10), 0 2px 6px rgba(10,12,16,0.06);
  --shadow-pop: 0 18px 60px -12px rgba(249,70,92,0.25), 0 8px 20px rgba(10,12,16,0.08);
  --shadow-inner: inset 0 0 0 1px rgba(10,12,16,0.06);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
}

/* ==========================================================================
   Semantic type styles — apply these via classes or @extend.
   ========================================================================== */

.li-display-xl,
h1.li-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 7vw, var(--fs-112));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.li-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, var(--fs-80));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.li-h1, h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, var(--fs-64));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.li-h2, h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.625rem, 3vw, var(--fs-48));
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.li-h3, h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-28);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.li-h4, h4 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.li-eyebrow {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: var(--fs-13);
  line-height: 1;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}

.li-lede {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-20);
  line-height: var(--lh-relax);
  letter-spacing: var(--tr-snug);
  color: var(--fg-2);
}

.li-body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg-1);
}

.li-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.li-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-12);
  line-height: 1.4;
  letter-spacing: var(--tr-loose);
  color: var(--fg-3);
}

.li-quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, var(--fs-40));
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.li-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  letter-spacing: var(--tr-normal);
  color: var(--fg-1);
}

/* sensible default body */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}