/*
 * lanobots-typography.css
 * Global type scale — utility classes that every page can use.
 * Depends on lanobots-tokens.css (loaded first).
 */

/* ============================================================
   BODY / BASE
   ============================================================ */
.lb-homepage,
.lb-homepage * {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.lb-homepage {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--lb-white);
}

/* ============================================================
   DISPLAY — headline-scale text
   ============================================================ */
.lb-display {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.93;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--lb-white);
}

/* Hero-scale — typically page banners */
.lb-display--hero {
  font-size: clamp(3.5rem, 8vw, 7rem);
}

/* Section hero / chapter heading */
.lb-display--xl {
  font-size: clamp(2.75rem, 6vw, 5.5rem);
}

/* Standard section title */
.lb-display--lg {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
}

/* Card / panel heading */
.lb-display--md {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

/* Sub-heading, small panels */
.lb-display--sm {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
}

/* ============================================================
   EYEBROW LABELS
   Small all-caps category tags above headings.
   Color inherits --page-accent via .lb-eyebrow (in components).
   ============================================================ */
.lb-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--page-accent);
  display: block;
  margin-bottom: 0.5rem;
}
.lb-eyebrow--dim {
  color: var(--lb-subtle);
}

/* ============================================================
   RUNNING BODY TEXT
   ============================================================ */
.lb-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--lb-muted);
  max-width: 62ch;
}

.lb-body--sm {
  font-size: 0.88rem;
  line-height: 1.6;
}

.lb-body--lg {
  font-size: 1.1rem;
  line-height: 1.7;
}

/* Balanced width for editorial prose (slightly wider than UI copy) */
.lb-prose {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--lb-muted);
  max-width: 68ch;
}

/* ============================================================
   UI LABELS — nav, buttons, tags, captions
   ============================================================ */
.lb-ui-label {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lb-muted);
}

.lb-ui-label--sm {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
}

.lb-ui-label--lg {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
}

/* Tag chip — e.g. genre labels on blog/media cards */
.lb-tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lb-subtle);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--lb-border);
  padding: 0.2rem 0.6rem;
  line-height: 1.6;
}

.lb-tag--accent {
  color: var(--lb-black);
  background: var(--page-accent);
  border-color: var(--page-accent);
}

/* ============================================================
   QUOTE / CALLOUT
   ============================================================ */
.lb-quote {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.22;
  color: var(--lb-white);
  border-left: 3px solid var(--page-accent);
  padding-left: 1.25rem;
  margin: 0;
}
.lb-quote cite {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lb-subtle);
  margin-top: 0.6rem;
}

/* ============================================================
   SECTION DIVIDER
   ============================================================ */
.lb-divider {
  width: 48px;
  height: 2px;
  background: var(--page-accent);
  border: none;
  margin: 0 0 1.25rem;
  transition: width var(--dur-base) var(--ease-out);
}
.lb-divider--center {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   HIGHLIGHT SPANS
   ============================================================ */
.lb-hl           { color: var(--lb-yellow);      }
.lb-hl--accent   { color: var(--page-accent);    }
.lb-hl--muted    { color: var(--lb-muted);       }
.lb-hl--white    { color: var(--lb-white);       }

/* ============================================================
   RESPONSIVE SCALE-DOWN
   ============================================================ */
@media (max-width: 640px) {
  .lb-body     { max-width: 100%; }
  .lb-prose    { max-width: 100%; }
  .lb-quote    { font-size: clamp(1.1rem, 4vw, 1.4rem); }
}