/* ════════════════════════════════════════════════════════════
   ZODIACREADS GLOBAL TYPOGRAPHY SYSTEM
   ════════════════════════════════════════════════════════════
   Centralized design tokens + semantic classes for font-size,
   line-height and font-weight across the whole app.

   Values are px (not rem) deliberately: public/css/style.css sets
   html{font-size:1.15rem}, so a rem-based scale here would silently
   multiply every size by 1.15x on top of the pixel values this
   system is built around. Keeping tokens in px avoids that.

   Font families/colors/spacing/cards/shadows are UNCHANGED - this
   file only standardizes text size, line-height, weight, and (for
   uppercase labels) letter-spacing.

   Usage: prefer the semantic classes (text-h2, text-body, etc.) on
   new/updated markup. The --font-size-* variables are also exposed
   directly for places that need to compose their own rule (e.g. an
   inline style that also needs a custom color).
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── Font sizes (desktop) ── */
  --font-size-display: 48px;
  --font-size-h1:       36px;
  --font-size-h2:       30px;
  --font-size-h3:       24px;
  --font-size-h4:       20px;
  --font-size-h5:       18px;
  --font-size-body-lg:  18px;
  --font-size-body:     16px;
  --font-size-body-sm:  14px;
  --font-size-label:    14px;
  --font-size-caption:  12px;
  --font-size-button:   15px;
  --font-size-nav:      15px;
  --font-size-stat-lg:  36px;   /* large primary stat, e.g. hero percentage */
  --font-size-stat-md:  27px;   /* medium stat */
  --font-size-stat-sm:  20px;   /* supporting number */

  /* ── Line heights ── */
  --line-height-tight:   1.2;
  --line-height-normal:  1.4;
  --line-height-relaxed: 1.55;

  /* ── Font weights ── */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ── Letter spacing ── */
  --letter-spacing-normal: 0;
  --letter-spacing-label:  0.1em; /* small uppercase section/eyebrow labels only */
}

/* ── Mobile overrides (≤640px): same variables, smaller scale ──
   Any element using the semantic classes/vars below automatically
   becomes responsive with no extra media queries at the call site. */
@media (max-width: 640px) {
  :root {
    --font-size-display: 36px;
    --font-size-h1:       30px;
    --font-size-h2:       26px;
    --font-size-h3:       22px;
    --font-size-h4:       18px;
    --font-size-h5:       17px;
    --font-size-body-lg:  17px;
    --font-size-body:     16px;
    --font-size-body-sm:  14px;
    --font-size-label:    13px;
    --font-size-caption:  12px;
    --font-size-stat-lg:  30px;
    --font-size-stat-md:  22px;
    --font-size-stat-sm:  18px;
  }
}

/* ════════════════════════════════════════════════════════════
   SEMANTIC CLASSES
   ════════════════════════════════════════════════════════════ */

.text-display {
  font-size: var(--font-size-display); line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-normal);
}
.text-h1 {
  font-size: var(--font-size-h1); line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-normal);
}
.text-h2 {
  font-size: var(--font-size-h2); line-height: 1.25;
  font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-normal);
}
.text-h3 {
  font-size: var(--font-size-h3); line-height: 1.3;
  font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-normal);
}
.text-h4 {
  font-size: var(--font-size-h4); line-height: 1.35;
  font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-normal);
}
.text-h5 {
  font-size: var(--font-size-h5); line-height: var(--line-height-normal);
  font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-normal);
}

/* Section headings: use these for "Key Traits" / "Personality" /
   "Strengths" / "Lucky Attributes" style section titles so every
   equivalent-level heading across the app matches. */
.text-section-heading {
  font-size: var(--font-size-h3); line-height: 1.3;
  font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-normal);
}
.text-subsection-heading {
  font-size: var(--font-size-h4); line-height: 1.35;
  font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-normal);
}
.text-small-subsection-heading {
  font-size: var(--font-size-h5); line-height: var(--line-height-normal);
  font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-normal);
}

.text-body-lg {
  font-size: var(--font-size-body-lg); line-height: var(--line-height-relaxed);
  font-weight: var(--font-weight-regular); letter-spacing: var(--letter-spacing-normal);
}
.text-body {
  font-size: var(--font-size-body); line-height: var(--line-height-relaxed);
  font-weight: var(--font-weight-regular); letter-spacing: var(--letter-spacing-normal);
}
.text-body-sm {
  font-size: var(--font-size-body-sm); line-height: 1.5;
  font-weight: var(--font-weight-regular); letter-spacing: var(--letter-spacing-normal);
}

.text-label {
  font-size: var(--font-size-label); line-height: var(--line-height-normal);
  font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-normal);
}
/* Small uppercase eyebrow/section labels (e.g. "CLASSICAL INSIGHTS") -
   the one place a bit of letter-spacing is appropriate. */
.text-label-uppercase {
  font-size: var(--font-size-caption); line-height: var(--line-height-normal);
  font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}
.text-caption {
  font-size: var(--font-size-caption); line-height: var(--line-height-normal);
  font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-normal);
}

.text-button {
  font-size: var(--font-size-button); line-height: var(--line-height-normal);
  font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-normal);
}
.text-nav {
  font-size: var(--font-size-nav); line-height: var(--line-height-normal);
  font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-normal);
}

.text-stat-lg {
  font-size: var(--font-size-stat-lg); line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-normal);
}
.text-stat-md {
  font-size: var(--font-size-stat-md); line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-normal);
}
.text-stat-sm {
  font-size: var(--font-size-stat-sm); line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-normal);
}

/* ── Cards ── */
.text-card-title {
  font-size: var(--font-size-h5); line-height: var(--line-height-normal);
  font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-normal);
}
.text-card-desc {
  font-size: var(--font-size-body-sm); line-height: var(--line-height-relaxed);
  font-weight: var(--font-weight-regular); letter-spacing: var(--letter-spacing-normal);
}
.text-card-meta {
  font-size: var(--font-size-caption); line-height: var(--line-height-normal);
  font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-normal);
}

/* ── Pills / badges / tags ──
   Also enforces graceful wrapping instead of clipping for long tags
   like "free-spirited". */
.text-pill {
  display: inline-flex; align-items: center;
  font-size: var(--font-size-label); line-height: 1.35;
  font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-normal);
  padding: 8px 14px; white-space: normal; word-break: break-word; text-align: center;
}

/* ── Report / long-form astrology text ──
   Same as text-body, named separately so it's easy to find every
   report paragraph across the app if this scale ever needs to move
   again in one place. */
.text-report {
  font-size: var(--font-size-body); line-height: 1.6;
  font-weight: var(--font-weight-regular); letter-spacing: var(--letter-spacing-normal);
  max-width: 68ch;
}