/* ==========================================================================
   Siaga Font Family
   ========================================================================== */

/* Regular - 400 */
@font-face {
  font-family: 'Siaga';
  src: url('../../fonts/RL-Siaga-Regular.woff2') format('woff2'),
       url('../../fonts/RL-Siaga-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bold - 700 */
@font-face {
  font-family: 'Siaga';
  src: url('../../fonts/RL-Siaga-Bold.woff2') format('woff2'),
       url('../../fonts/RL-Siaga-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Ultra - 800 */
@font-face {
  font-family: 'Siaga';
  src: url('../../fonts/RL-Siaga-Ultra.woff2') format('woff2'),
       url('../../fonts/RL-Siaga-Ultra.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Ultra - 900 */
@font-face {
  font-family: 'Siaga';
  src: url('../../fonts/RL-Siaga-Ultra.woff2') format('woff2'),
       url('../../fonts/RL-Siaga-Ultra.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Base Typography - Matching Figma Specs
   ========================================================================== */

html {
  font-size: 100%; /* 16px base */
}

body {
  font-family: 'Siaga', sans-serif;
  font-weight: 400;
  line-height: 1.2;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Siaga', sans-serif;
  font-weight: 800;
  line-height: 1.0;
  margin-top: 0;
  margin-bottom: 0;
}

/* Default heading sizes - overridden by component-specific classes */
h1 { font-size: 3.75vw; } /* 72px / 1920 */
h2 { font-size: 3.75vw; } /* 72px / 1920 */
h3 { font-size: 3.0208vw; } /* 58px / 1920 */
h4 { font-size: 1.9792vw; } /* 38px / 1920 */
h5 { font-size: 1.7708vw; } /* 34px / 1920 */
h6 { font-size: 1.25vw; } /* 24px / 1920 */

p {
  font-size: 1.7708vw; /* 34px / 1920 */
  line-height: 1.2;
  margin-bottom: 1em;
}

small, .text-small {
  font-size: 1.25vw; /* 24px / 1920 */
}

.text-xs {
  font-size: 0.7292vw; /* 14px / 1920 */
}

/* ==========================================================================
   Figma Typography Classes - Exact Specs
   ========================================================================== */

/* Hero headline - 150px, weight 800, line-height 0.98 */
.text-hero {
  font-size: 7.8125vw; /* 150px / 1920 */
  font-weight: 800;
  line-height: 0.98;
}

/* Section headlines - 72px, weight 800 */
.text-section-headline {
  font-size: 3.75vw; /* 72px / 1920 */
  font-weight: 800;
  line-height: 1.2;
}

/* Pillar titles - 58px, weight 800 */
.text-pillar-title {
  font-size: 3.0208vw; /* 58px / 1920 */
  font-weight: 800;
  line-height: 1.02;
  text-align: center;
}

/* Body large - 34px */
.text-body-lg {
  font-size: 1.7708vw; /* 34px / 1920 */
  font-weight: 400;
  line-height: 1.2;
}

/* Body medium - 24px */
.text-body-md {
  font-size: 1.25vw; /* 24px / 1920 */
  font-weight: 400;
  line-height: 1.2;
}

/* Quote text - 72px, weight 400 (not italic in Figma) */
.text-quote {
  font-size: 3.75vw; /* 72px / 1920 */
  font-weight: 400;
  line-height: 1.2;
}

/* Attribution - 34px, weight 600 */
.text-attribution {
  font-size: 1.7708vw; /* 34px / 1920 */
  font-weight: 600;
  line-height: 1.2;
}

/* News headline - 38px, weight 500 */
.text-news-headline {
  font-size: 1.9792vw; /* 38px / 1920 */
  font-weight: 500;
  line-height: 1.2;
}

/* Footer contact - 150px, weight 800 */
.text-footer-contact {
  font-size: 7.8125vw; /* 150px / 1920 */
  font-weight: 800;
  line-height: 1.2;
}

/* ==========================================================================
   Responsive Typography
   ========================================================================== */

/* Font sizes use vw units and scale automatically with viewport */

/* ==========================================================================
   Font Weight Utilities
   ========================================================================== */

.font-regular { font-weight: 400; }
.font-bold { font-weight: 700; }
.font-ultra { font-weight: 900; }

/* ==========================================================================
   Text Style Utilities
   ========================================================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

.italic { font-style: italic; }