/* ═══════════════════════════════════════════════════════════════
   typography.css - Single source of truth for all font tokens
   Clarrus project | Phase 4 Typography System (TYPO-01)
   ═══════════════════════════════════════════════════════════════

   Four-layer architecture:
     Layer 1  Google Fonts import
     Layer 2  Raw scale tokens in :root (mobile-first)
     Layer 3  Semantic role tokens in :root
     Layer 4  Utility classes + .serif bug fix (TYPO-13)

   DO NOT add per-page styles, element resets, or layout rules here.
   This file defines the system - it does not apply it.
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   Layer 1: Font imports (Google Fonts)
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,600&family=Lexend+Exa:wght@700&display=swap');


/* ═══════════════════════════════════════════════════════════════
   Layer 2a: Font-family primitives (TYPO-00)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:   'Source Serif 4', Georgia, serif;
  --font-display: 'Lexend Exa', sans-serif;
}


/* ═══════════════════════════════════════════════════════════════
   Layer 2b: Font-size scale - mobile defaults (TYPO-02)
   Mobile values are the :root base; desktop expands via min-width
   ═══════════════════════════════════════════════════════════════ */

:root {
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  26px;
  --text-3xl:  32px;
  --text-4xl:  44px;
  --text-5xl:  48px;
}

/* Desktop expansion - MUST use min-width (mobile-first) per TYPO-02 */
@media (min-width: 768px) {
  :root {
    --text-xl:  24px;
    --text-2xl: 30px;
    --text-3xl: 38px;
    --text-4xl: 52px;
    --text-5xl: 56px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   Layer 2c: Font-weight scale (TYPO-03)
   No weight 800 - highest imported weight is 700
   ═══════════════════════════════════════════════════════════════ */

:root {
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
}


/* ═══════════════════════════════════════════════════════════════
   Layer 2d: Line-height scale (TYPO-04)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;
}


/* ═══════════════════════════════════════════════════════════════
   Layer 2e: Letter-spacing scale (TYPO-05)
   em units only - never px or unitless for tracking
   ═══════════════════════════════════════════════════════════════ */

:root {
  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.12em;
}


/* ═══════════════════════════════════════════════════════════════
   Layer 3: Semantic role tokens (TYPO-06)
   All values reference Layer 2 raw tokens via var()
   Each role has exactly 5 custom properties:
     -family  -size  -weight  -leading  -tracking
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* --- heading-1: serif, 3xl, bold, tight leading, tight tracking --- */
  --role-heading-1-family:   var(--font-serif);
  --role-heading-1-size:     var(--text-3xl);
  --role-heading-1-weight:   var(--weight-bold);
  --role-heading-1-leading:  var(--leading-tight);
  --role-heading-1-tracking: var(--tracking-tight);

  /* --- heading-2: serif, 2xl, bold, tight leading, tight tracking --- */
  --role-heading-2-family:   var(--font-serif);
  --role-heading-2-size:     var(--text-2xl);
  --role-heading-2-weight:   var(--weight-bold);
  --role-heading-2-leading:  var(--leading-tight);
  --role-heading-2-tracking: var(--tracking-tight);

  /* --- heading-3: sans, xl, semibold, snug leading, normal tracking --- */
  --role-heading-3-family:   var(--font-sans);
  --role-heading-3-size:     var(--text-xl);
  --role-heading-3-weight:   var(--weight-semibold);
  --role-heading-3-leading:  var(--leading-snug);
  --role-heading-3-tracking: var(--tracking-normal);

  /* --- heading-4: sans, lg, semibold, snug leading, normal tracking --- */
  --role-heading-4-family:   var(--font-sans);
  --role-heading-4-size:     var(--text-lg);
  --role-heading-4-weight:   var(--weight-semibold);
  --role-heading-4-leading:  var(--leading-snug);
  --role-heading-4-tracking: var(--tracking-normal);

  /* --- body: sans, base, normal, relaxed leading, normal tracking --- */
  --role-body-family:        var(--font-sans);
  --role-body-size:          var(--text-base);
  --role-body-weight:        var(--weight-normal);
  --role-body-leading:       var(--leading-relaxed);
  --role-body-tracking:      var(--tracking-normal);

  /* --- body-sm: sans, sm, normal, normal leading, normal tracking --- */
  --role-body-sm-family:     var(--font-sans);
  --role-body-sm-size:       var(--text-sm);
  --role-body-sm-weight:     var(--weight-normal);
  --role-body-sm-leading:    var(--leading-normal);
  --role-body-sm-tracking:   var(--tracking-normal);

  /* --- caption: sans, xs, normal, normal leading, wide tracking --- */
  --role-caption-family:     var(--font-sans);
  --role-caption-size:       var(--text-xs);
  --role-caption-weight:     var(--weight-normal);
  --role-caption-leading:    var(--leading-normal);
  --role-caption-tracking:   var(--tracking-wide);

  /* --- label: sans, sm, medium, tight leading, wider tracking --- */
  --role-label-family:       var(--font-sans);
  --role-label-size:         var(--text-sm);
  --role-label-weight:       var(--weight-medium);
  --role-label-leading:      var(--leading-tight);
  --role-label-tracking:     var(--tracking-wider);

  /* --- ui-text: sans, md, medium, tight leading, normal tracking --- */
  --role-ui-text-family:     var(--font-sans);
  --role-ui-text-size:       var(--text-md);
  --role-ui-text-weight:     var(--weight-medium);
  --role-ui-text-leading:    var(--leading-tight);
  --role-ui-text-tracking:   var(--tracking-normal);

  /* --- nav-text: sans, sm, semibold, tight leading, wide tracking --- */
  --role-nav-text-family:    var(--font-sans);
  --role-nav-text-size:      var(--text-sm);
  --role-nav-text-weight:    var(--weight-semibold);
  --role-nav-text-leading:   var(--leading-tight);
  --role-nav-text-tracking:  var(--tracking-wide);
}


/* ═══════════════════════════════════════════════════════════════
   Layer 4: Utility classes (TYPO-06)
   Each class applies exactly 5 declarations referencing Layer 3
   ═══════════════════════════════════════════════════════════════ */

.heading-1 {
  font-family:    var(--role-heading-1-family);
  font-size:      var(--role-heading-1-size);
  font-weight:    var(--role-heading-1-weight);
  line-height:    var(--role-heading-1-leading);
  letter-spacing: var(--role-heading-1-tracking);
}

.heading-2 {
  font-family:    var(--role-heading-2-family);
  font-size:      var(--role-heading-2-size);
  font-weight:    var(--role-heading-2-weight);
  line-height:    var(--role-heading-2-leading);
  letter-spacing: var(--role-heading-2-tracking);
}

.heading-3 {
  font-family:    var(--role-heading-3-family);
  font-size:      var(--role-heading-3-size);
  font-weight:    var(--role-heading-3-weight);
  line-height:    var(--role-heading-3-leading);
  letter-spacing: var(--role-heading-3-tracking);
}

.heading-4 {
  font-family:    var(--role-heading-4-family);
  font-size:      var(--role-heading-4-size);
  font-weight:    var(--role-heading-4-weight);
  line-height:    var(--role-heading-4-leading);
  letter-spacing: var(--role-heading-4-tracking);
}

.body-text {
  font-family:    var(--role-body-family);
  font-size:      var(--role-body-size);
  font-weight:    var(--role-body-weight);
  line-height:    var(--role-body-leading);
  letter-spacing: var(--role-body-tracking);
}

.body-sm {
  font-family:    var(--role-body-sm-family);
  font-size:      var(--role-body-sm-size);
  font-weight:    var(--role-body-sm-weight);
  line-height:    var(--role-body-sm-leading);
  letter-spacing: var(--role-body-sm-tracking);
}

.caption {
  font-family:    var(--role-caption-family);
  font-size:      var(--role-caption-size);
  font-weight:    var(--role-caption-weight);
  line-height:    var(--role-caption-leading);
  letter-spacing: var(--role-caption-tracking);
}

.label {
  font-family:    var(--role-label-family);
  font-size:      var(--role-label-size);
  font-weight:    var(--role-label-weight);
  line-height:    var(--role-label-leading);
  letter-spacing: var(--role-label-tracking);
}

.ui-text {
  font-family:    var(--role-ui-text-family);
  font-size:      var(--role-ui-text-size);
  font-weight:    var(--role-ui-text-weight);
  line-height:    var(--role-ui-text-leading);
  letter-spacing: var(--role-ui-text-tracking);
}

.nav-text {
  font-family:    var(--role-nav-text-family);
  font-size:      var(--role-nav-text-size);
  font-weight:    var(--role-nav-text-weight);
  line-height:    var(--role-nav-text-leading);
  letter-spacing: var(--role-nav-text-tracking);
}

/* TYPO-13: .serif maps to Source Serif 4 (not Inter - that was the bug) */
.serif {
  font-family: var(--font-serif);
}