/* ============================================================
   AS Apps Developer Portal — Typography System
   ============================================================
   Font stack: Space Grotesk (headings), Inter (body), Poppins (buttons).
   Uses Google Fonts via preconnected CDN.
   ============================================================ */

/* ── Font Face Declarations (loaded via <link> in HTML) ── */
/* Fonts loaded in index.html:
   - Space Grotesk: 400, 500, 600, 700
   - Inter: 300, 400, 500, 600
   - Poppins: 400, 500, 600
*/

/* ── Font Stacks ── */
:root {
  --font-heading: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-button:  'Poppins', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

/* ── Base Body Typography ── */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--font-regular);
  letter-spacing: var(--tracking-normal);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h1, .h1 {
  font-size: var(--text-5xl);
  letter-spacing: var(--tracking-tighter);
}

h2, .h2 {
  font-size: var(--text-4xl);
}

h3, .h3 {
  font-size: var(--text-3xl);
}

h4, .h4 {
  font-size: var(--text-2xl);
}

h5, .h5 {
  font-size: var(--text-xl);
}

h6, .h6 {
  font-size: var(--text-lg);
}

/* ── Responsive Heading Scale ── */
@media (max-width: 768px) {
  h1, .h1 {
    font-size: var(--text-3xl);
  }
  h2, .h2 {
    font-size: var(--text-2xl);
  }
  h3, .h3 {
    font-size: var(--text-xl);
  }
  h4, .h4 {
    font-size: var(--text-lg);
  }
}

@media (min-width: 1440px) {
  h1, .h1 {
    font-size: var(--text-6xl);
  }
  h2, .h2 {
    font-size: var(--text-5xl);
  }
}

/* ── Body Text Variants ── */
.text-lg {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

/* ── Lead / Subtitle ── */
.text-lead {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  font-weight: var(--font-regular);
}

@media (max-width: 768px) {
  .text-lead {
    font-size: var(--text-lg);
  }
}

/* ── Caption / Label ── */
.text-caption {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--font-semibold);
}

/* ── Text Colors ── */
.text-primary {
  color: var(--color-primary-light);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-tertiary {
  color: var(--color-text-tertiary);
}

.text-accent {
  color: var(--color-accent-light);
}

/* ── Gradient Text ── */
.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Text Utilities ── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

/* ── Font Weight Utilities ── */
.font-light    { font-weight: var(--font-light); }
.font-regular  { font-weight: var(--font-regular); }
.font-medium   { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold     { font-weight: var(--font-bold); }

/* ── Max Width for Readability ── */
.text-readable {
  max-width: 65ch;
}

.text-narrow {
  max-width: 45ch;
}