/* ==========================================================================
   Launch Learning — Colors & Type
   The educational arm of Launch Industries.
   Single source of truth for foundational tokens.
   ========================================================================== */

/* ---------- Fonts (local, lifted from LIDS — Launch family typeface) ---------- */
@font-face {
  font-family: "PP Formula";
  src: url("fonts/PPFormula-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula";
  src: url("fonts/PPFormula-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula";
  src: url("fonts/PPFormula-MediumItalic.otf") format("opentype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PP Formula";
  src: url("fonts/PPFormula-Extrabold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula Narrow";
  src: url("fonts/PPFormula-NarrowRegular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula Narrow";
  src: url("fonts/PPFormula-NarrowSemibold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula Extended";
  src: url("fonts/PPFormula-ExtendedBold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Formula Compressed";
  src: url("fonts/PPFormula-CondensedBlack.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ==========================================================================
   :root tokens
   ========================================================================== */
:root {
  /* ---------- Brand colors (sampled directly from the LL icon) ---------- */
  --ll-indigo:      #4C3CE5;   /* the book cover — primary brand color */
  --ll-indigo-700:  #3A2BC6;   /* hover / press */
  --ll-indigo-500:  #6E60EC;   /* lighter accent */
  --ll-indigo-200:  #CFC9F9;   /* soft tint */
  --ll-indigo-100:  #E7E4FC;   /* faintest wash */

  --ll-yellow:      #FECE00;   /* highlighter accent — never used as text */
  --ll-yellow-700:  #D9AF00;
  --ll-yellow-100:  #FFF4C2;

  --ll-teal:        #00E0E0;   /* wave — secondary surfaces, info */
  --ll-teal-700:    #00B8B8;
  --ll-teal-100:    #C7F8F8;

  --ll-pink:        #FF0054;   /* the i-dot — punctuation, alerts, accents */
  --ll-pink-700:    #D40046;
  --ll-pink-100:    #FFD3E0;

  --ll-black:       #0A0A0F;   /* near-black — ink for body + headlines */
  --ll-white:       #FFFFFF;
  --ll-paper:       #FBF8F1;   /* warm off-white — the "page" surface */
  --ll-paper-2:     #F4EFE2;   /* deeper paper — for spreads, second page */

  /* ---------- Ink ramp (warm-neutral, modernized) ---------- */
  --ink-1000: #0A0A0F;
  --ink-900:  #16161D;
  --ink-800:  #232330;
  --ink-700:  #393948;
  --ink-600:  #54546A;
  --ink-500:  #707088;
  --ink-400:  #9494A8;
  --ink-300:  #BBBBC8;
  --ink-200:  #DCDCE4;
  --ink-150:  #E7E7EC;
  --ink-100:  #EFEFF3;
  --ink-50:   #F6F6F9;
  --ink-0:    #FFFFFF;

  /* ---------- 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(--ll-paper);   /* warm "page" — preferred for content */
  --bg-paper-2:var(--ll-paper-2); /* second page in a spread */
  --bg-indigo: var(--ll-indigo);  /* hero / focus surface */
  --bg-ink:    var(--ll-black);   /* the chalkboard */

  --border-1:      var(--ink-150);
  --border-2:      var(--ink-200);
  --border-strong: var(--ll-black);
  --border-indigo: var(--ll-indigo);

  /* ---------- Semantic intent ---------- */
  --intent-primary: var(--ll-indigo);   /* primary actions are indigo */
  --intent-accent:  var(--ll-yellow);   /* highlighter accent */
  --intent-success: #14B886;            /* gentler than LMC green */
  --intent-danger:  var(--ll-pink);     /* the dot, repurposed */
  --intent-info:    var(--ll-teal);

  /* ---------- Type families ---------- */
  --font-sans:      "PP Formula", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-narrow:    "PP Formula Narrow", "PP Formula", system-ui, sans-serif;
  --font-extended:  "PP Formula Extended", "PP Formula", system-ui, sans-serif;
  --font-display:   "PP Formula Compressed", "PP Formula", system-ui, sans-serif;
  --font-mono:      ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --fs-display: clamp(3rem, 6.4vw, 5.5rem);
  --fs-h1:      clamp(2rem, 4vw, 3.5rem);
  --fs-h2:      clamp(1.5rem, 2.8vw, 2.25rem);
  --fs-h3:      1.5rem;
  --fs-h4:      1.25rem;
  --fs-lead:    1.125rem;
  --fs-body:    1rem;
  --fs-small:   0.9375rem;
  --fs-micro:   0.8125rem;
  --fs-eyebrow: 0.75rem;

  /* line-heights and tracking */
  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-base:    1.55;
  --lh-loose:   1.7;     /* generous like a textbook */
  --tr-tight:   -0.02em;
  --tr-snug:    -0.01em;
  --tr-normal:  0;
  --tr-loose:   0.04em;
  --tr-wide:    0.14em;  /* eyebrow spacing */

  /* font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* ---------- Spacing (4pt grid) ---------- */
  --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;

  /* ---------- Radii ---------- */
  /* LL leans more rounded than LMC — bookish, not poster-y */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;     /* default card */
  --radius-xl:   28px;     /* hero card */
  --radius-pill: 999px;

  /* ---------- Shadows (soft, page-like) ---------- */
  --shadow-1: 0 1px 0 rgba(10,10,15,0.04), 0 1px 2px rgba(10,10,15,0.06);
  --shadow-2: 0 4px 8px rgba(10,10,15,0.06), 0 12px 24px rgba(10,10,15,0.06);
  --shadow-3: 0 16px 40px rgba(10,10,15,0.12), 0 4px 10px rgba(10,10,15,0.08);
  /* The "book stack" — a layered shadow that fakes a stack of pages.
     Pair with off-white card backgrounds. */
  --shadow-pages:
    1px 0 0 var(--ink-150),
    3px 2px 0 var(--ll-paper),
    6px 4px 0 var(--ink-150),
    8px 6px 0 var(--ll-paper-2),
    12px 16px 32px rgba(10,10,15,0.10);
  /* The "indigo glow" — used on hero cards on light backgrounds */
  --shadow-indigo: 0 20px 60px -16px rgba(76,60,229,0.45), 0 8px 18px rgba(10,10,15,0.08);

  /* ---------- 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-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* ---------- Border presets ---------- */
  --border-hair:   1px solid var(--border-1);
  --border-rule:   1.5px solid var(--ink-200);
  --border-card:   1.5px solid var(--ll-black);
  --border-indigo-2: 2px solid var(--ll-indigo);
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0;
}

p { margin: 0; }

a { color: var(--ll-indigo); text-decoration: none; }
a:hover { color: var(--ll-indigo-700); }

strong { font-weight: var(--fw-bold); color: var(--fg-1); }
em { font-style: italic; }

code, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--ink-100);
  color: var(--fg-1);
  padding: 2px 7px;
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   The LL "i-dot" — the brand's signature accent.
   Use as ::after on a single eyebrow letter, or as a standalone <span>.
   ========================================================================== */
.ll-dot {
  display: inline-block;
  width: 0.34em;
  height: 0.34em;
  border-radius: 50%;
  background: var(--ll-pink);
  vertical-align: top;
  transform: translateY(0.08em);
}

/* ==========================================================================
   Semantic type styles
   ========================================================================== */
.ll-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}
.ll-h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.ll-h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.ll-h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.ll-h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }

.ll-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  max-width: 64ch;
}

.ll-body  { font-size: var(--fs-body); line-height: var(--lh-base); color: var(--fg-1); }
.ll-small { font-size: var(--fs-small); color: var(--fg-2); }
.ll-micro { font-size: var(--fs-micro); color: var(--fg-3); }

/* Eyebrow / chapter label — the signature small-caps with a pink dot */
.ll-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-narrow);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--ll-indigo);
}
.ll-eyebrow::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--ll-pink);
}

/* The highlighter — wrap one to three words to "mark" them with yellow */
.ll-mark {
  background: linear-gradient(180deg, transparent 0 55%, var(--ll-yellow) 55% 92%, transparent 92%);
  padding: 0 0.1em;
}

/* Folio — small chapter / page metadata in a corner */
.ll-folio {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-loose);
  color: var(--fg-3);
  text-transform: uppercase;
}