/* ==========================================================================
   EliteBlocc — Typography
   File: assets/css/global/eb-typography.css
   Version: 2.0

   SECTIONS
   01. @font-face declarations (self-hosted)
   02. Heading scale — h1–h6 utility classes
   03. Display heading (hero/statement use)
   04. Eyebrow labels
   05. Body text utilities
   06. Section header layout blocks
   07. Text colour utilities

   IMPORTANT — HEADING DEFINITIONS
   .eb-heading-1 through .eb-heading-4 are defined here.
   Do NOT redefine them in page or component CSS files.
   Use modifier classes or BEM elements for variations.
   ========================================================================== */

/* ── 01. @font-face ──────────────────────────────────────────────────────── */

/* Orbitron — variable weight 400–900. Used for headings + brand mark. */
@font-face {
  font-family: 'Orbitron';
  src: url('../../fonts/Orbitron/Orbitron-VariableFont_wght.woff2') format('woff2'),
       url('../../fonts/Orbitron/Orbitron-VariableFont_wght.ttf')   format('truetype');
  font-weight:  400 900;
  font-style:   normal;
  font-display: swap;
}

/* Inter — primary body font (--eb-font-body). */
@font-face {
  font-family: 'Inter';
  src: url('../../fonts/inter/inter-variable.woff2') format('woff2 supports variations'),
       url('../../fonts/inter/inter-variable.woff2') format('woff2');
  font-weight:  100 900;
  font-style:   normal;
  font-display: swap;
}

/* Montserrat — retained for future use, not currently active in token system. */
@font-face {
  font-family: 'Montserrat';
  src: url('../../fonts/montserrat/montserrat-variable.woff2') format('woff2 supports variations'),
       url('../../fonts/montserrat/montserrat-variable.woff2') format('woff2');
  font-weight:  100 900;
  font-style:   normal;
  font-display: swap;
}

/* ── 02. Heading scale ───────────────────────────────────────────────────── */

.eb-heading-1,
.eb-heading-2,
.eb-heading-3,
.eb-heading-4 {
  font-family:    var(--eb-font-heading);
  font-weight:    var(--eb-weight-bold);
  line-height:    var(--eb-leading-tight);
  letter-spacing: var(--eb-tracking-tight);
  color:          var(--eb-text-primary);
}

.eb-heading-1 {
  font-size:   var(--eb-text-5xl);
  font-weight: var(--eb-weight-black);
}

.eb-heading-2 {
  font-size: var(--eb-text-4xl);
}

.eb-heading-3 {
  font-size: var(--eb-text-3xl);
}

.eb-heading-4 {
  font-size:      var(--eb-text-2xl);
  font-weight:    var(--eb-weight-semibold);
  letter-spacing: 0;
}

/* ── 03. Display heading — hero + statement use ──────────────────────────── */

.eb-heading-display {
  font-family:    var(--eb-font-heading);
  font-size:      var(--eb-text-6xl);
  font-weight:    var(--eb-weight-black);
  line-height:    var(--eb-leading-tight);
  letter-spacing: var(--eb-tracking-tight);
  color:          var(--eb-text-primary);
}

/* ── 04. Eyebrow label ───────────────────────────────────────────────────── */

.eb-eyebrow {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--eb-space-2);
  font-family:     var(--eb-font-body);
  font-size:       var(--eb-text-xs);
  font-weight:     var(--eb-weight-semibold);
  letter-spacing:  var(--eb-tracking-widest);
  text-transform:  uppercase;
  color:           var(--eb-color-gold);
}

/* Left-border ruled variant */
.eb-eyebrow--ruled {
  padding-left: var(--eb-space-4);
  border-left:  2px solid var(--eb-color-gold);
  border-radius: 0; /* ensure no radius on single-side border */
}

/* ── 05. Body text utilities ─────────────────────────────────────────────── */

.eb-body {
  font-family:         var(--eb-font-body);
  font-size:           var(--eb-text-base);
  font-weight:         var(--eb-weight-regular);
  line-height:         var(--eb-leading-relaxed);
  color:               var(--eb-text-primary);
  font-optical-sizing: auto;
}

.eb-body--lead {
  font-size:   var(--eb-text-md);
  line-height: var(--eb-leading-relaxed);
  color:       var(--eb-text-secondary);
}

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

.eb-section-lead {
  font-family:         var(--eb-font-body);
  font-size:           var(--eb-text-md);
  font-weight:         var(--eb-weight-regular);
  line-height:         var(--eb-leading-relaxed);
  color:               var(--eb-text-secondary);
  max-width:           65ch;
  font-optical-sizing: auto;
}

/* ── 06. Section header layout blocks ────────────────────────────────────── */

.eb-section-header {
  margin-bottom: var(--eb-space-16);
}

.eb-section-header .eb-eyebrow   { margin-bottom: var(--eb-space-4); }
.eb-section-header .eb-heading-2  { margin-bottom: var(--eb-space-6); }
.eb-section-header .eb-section-lead { margin-bottom: 0; }

.eb-section-header--center { text-align: center; }

.eb-section-header--center .eb-section-lead {
  margin-left:  auto;
  margin-right: auto;
}

.eb-section-header--constrained { max-width: var(--eb-container-narrow); }

.eb-section-header--constrained.eb-section-header--center {
  margin-left:  auto;
  margin-right: auto;
}

/* ── 07. Text colour utilities ───────────────────────────────────────────── */

.eb-text--accent    { color: var(--eb-text-accent); }
.eb-text--muted     { color: var(--eb-text-muted); }
.eb-text--secondary { color: var(--eb-text-secondary); }
.eb-text--inverse   { color: var(--eb-text-inverse); }
.eb-text--gold      { color: var(--eb-color-gold); }
.eb-text--emerald   { color: var(--eb-color-emerald-light); }