/* ============================================================
   Pick Me Up — Typography tokens
   Single-family system: Plus Jakarta Sans (Google Fonts, free).
   Hierarchy comes from size + weight, never a second typeface.
   (Compiler Plain Text is the parked commercial brand face.)
   @import must be first in the file.
   ============================================================ */

/* Self-hosted Plus Jakarta Sans (variable, OFL) — no external font requests. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/plus-jakarta-sans-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/plus-jakarta-sans-italic.woff2") format("woff2");
}

:root {
  /* --- Font families (single family, aliased for intent) --- */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-text:    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font:         var(--font-text);

  /* --- Font weights (working set) --- */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* --- Font sizes --- */
  --fs-2xs:  11px;
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  28px;
  --fs-3xl:  32px;
  --fs-4xl:  40px;
  --fs-5xl:  48px;

  /* --- Line heights --- */
  --lh-none:    1;    /* @kind font */
  --lh-tight:   1.15; /* @kind font */
  --lh-snug:    1.25; /* @kind font */
  --lh-normal:  1.4;  /* @kind font */
  --lh-relaxed: 1.5;  /* @kind font */

  /* --- Letter spacing --- */
  --ls-tight:   -0.01em;
  --ls-normal:  0em;
  --ls-wide:    0.04em;
  --ls-eyebrow: 0.14em;
}

/* ============================================================
   Semantic text styles — hierarchy by size + weight
   ============================================================ */
.text-display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.text-display {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.text-display-sm {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.text-heading {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.text-title {
  font-family: var(--font-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}
.text-body-lg {
  font-family: var(--font-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
}
.text-body {
  font-family: var(--font-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
}
.text-body-sm {
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}
.text-label {
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
}
.text-button {
  font-family: var(--font-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-wide);
}
.text-caption {
  font-family: var(--font-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}
.text-overline {
  font-family: var(--font-text);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}