/* ===================================================================
   TYPOGRAPHY
   Headings, paragraphs, text utilities
   All values reference tokens from tokens.css
   =================================================================== */

h1 {
     font-size: var(--font-size-3xl);
     font-family: var(--font-heading);
     font-weight: var(--font-weight-semibold);
     text-transform: uppercase;
     letter-spacing: var(--letter-spacing-wider);
}

@media (max-width: 1023px) {
     h1 {
          text-align: center;
          font-size: var(--font-size-mobile-2xl);
          letter-spacing: var(--letter-spacing-normal);
     }
}

h2 {
     font-size: var(--font-size-2xl);
     font-family: var(--font-heading);
     font-weight: var(--font-weight-normal);
     text-transform: uppercase;
     letter-spacing: var(--letter-spacing-wider);
     padding-block: var(--spacing-xl);
     margin-block: var(--spacing-xl);
}

@media (max-width: 1023px) {
     h2 {
          text-align: center;
          font-size: var(--font-size-mobile-xl);
          padding-block: var(--spacing-md);
          margin-block: var(--spacing-md);
     }
}

h3 {
     font-size: var(--font-size-xl);
     font-family: var(--font-heading);
     font-weight: var(--font-weight-bold);
     text-transform: uppercase;
     letter-spacing: var(--letter-spacing-normal);
     padding-block: var(--spacing-xl);
     margin-block: var(--spacing-xl);
}

@media (max-width: 1023px) {
     h3 {
          text-align: center;
          font-size: var(--font-size-mobile-lg);
          padding-block: var(--spacing-md);
          margin-block: var(--spacing-md);
     }
}

h4 {
     font-weight: var(--font-weight-bold);
     color: var(--color-text-dark);
     text-transform: uppercase;
     letter-spacing: var(--letter-spacing-normal);
     font-size: var(--font-size-sm);
     font-family: var(--font-heading);
}

@media (max-width: 1023px) {
     h4 {
          font-size: var(--font-size-mobile-base);
     }
}

/* ===================================================================
   HEADING SIZE UTILITIES
   Use to maintain visual hierarchy while fixing semantic structure
   e.g., <h2 class="h3-visual"> looks like h3 but is semantically h2
   =================================================================== */

.h3-visual {
     font-size: var(--font-size-xl);
     font-weight: var(--font-weight-bold);
     letter-spacing: var(--letter-spacing-normal);
     padding-block: var(--spacing-xl);
     margin-block: var(--spacing-xl);
}

@media (max-width: 1023px) {
     .h3-visual {
          font-size: var(--font-size-mobile-lg);
          padding-block: var(--spacing-md);
          margin-block: var(--spacing-md);
     }
}

h5 {
     font-family: var(--font-heading);
     font-size: var(--font-size-lg);
     font-weight: var(--font-weight-normal);
     text-transform: uppercase;
     letter-spacing: var(--letter-spacing-normal);
     color: var(--color-text-muted);
     padding-block: var(--spacing-md);
     margin-block: var(--spacing-md);
}

@media (max-width: 1023px) {
     h5 {
          text-align: center;
          font-size: var(--font-size-mobile-base);
          padding-block: var(--spacing-sm);
          margin-block: var(--spacing-sm);
     }
}

/* .h5-visual - Apply h5 styling to semantic h3s */
.h5-visual {
     font-family: var(--font-heading);
     font-size: var(--font-size-lg);
     font-weight: var(--font-weight-normal);
     text-transform: uppercase;
     letter-spacing: var(--letter-spacing-normal);
     color: var(--color-text-muted);
     padding-block: var(--spacing-md);
     margin-block: var(--spacing-md);
}

@media (max-width: 1023px) {
     .h5-visual {
          text-align: center;
          font-size: var(--font-size-mobile-base);
          padding-block: var(--spacing-sm);
          margin-block: var(--spacing-sm);
     }
}

p {
     font-family: var(--font-body);
     letter-spacing: var(--letter-spacing-tight);
     font-size: var(--font-size-lg);
     text-align: left;
     line-height: var(--line-height-relaxed);
     margin-block: var(--spacing-xl);
}

@media (max-width: 1023px) {
     p {
          font-size: var(--font-size-mobile-base);
          margin-block: var(--spacing-md);
     }
}

@media (min-width: 1024px) {
     p {
          font-size: var(--font-size-lg);
          text-align: left;
          margin-block-end: auto;
     }
}

ol, ul {
     font-family: var(--font-body);
     letter-spacing: var(--letter-spacing-tight);
     line-height: var(--line-height-relaxed);
     margin: auto;
     font-size: var(--font-size-lg);
     text-align: left;
     margin-block: var(--spacing-xl);
}

@media (max-width: 1023px) {
     ol, ul {
          font-size: var(--font-size-mobile-base);
     }
}

/* Glass number decoration */
glass-number {
     font-family: var(--font-heading);
     font-size: var(--font-size-display);
     font-weight: var(--font-weight-black);
     color: var(--glass-background);
     position: absolute;
     top: var(--spacing-md);
     right: var(--spacing-xl);
     line-height: var(--line-height-none);
     z-index: 0;
}

/* ===================================================================
   TEXT UTILITIES
   =================================================================== */

/* Text colors */
.tw { color: var(--color-white); }
.tn { color: var(--color-text-dark); }
.tt { color: var(--color-text-muted); }

/* Text alignment */
.tcent { text-align: center; }
.text-center { text-align: center; }

/* Triangle decorations */
.tri:before {
     top: calc(var(--spacing-4xl) * -1);
     border-width: 0 var(--spacing-4xl) var(--spacing-4xl) var(--spacing-4xl);
     border-color: transparent transparent var(--color-white) transparent;
}

.tri:after {
     bottom: calc(var(--spacing-4xl) * -1);
     border-width: var(--spacing-4xl) var(--spacing-4xl) 0 var(--spacing-4xl);
     border-color: var(--color-white) transparent transparent transparent;
}

.tri:before, .tri:after {
     content: "";
     display: block;
     width: 0;
     height: 0;
     position: absolute;
     left: 50%;
     transform: translate(-50%, 0);
     border-style: solid;
     z-index: 10;
}

@media (max-width: 1023px) {
     .tri:before {
          top: calc(var(--triangle-mobile) * -1);
          border-width: 0 var(--triangle-mobile) var(--triangle-mobile) var(--triangle-mobile);
          border-color: transparent transparent var(--color-white) transparent;
     }

     .tri:after {
          bottom: calc(var(--triangle-mobile) * -1);
          border-width: var(--triangle-mobile) var(--triangle-mobile) 0 var(--triangle-mobile);
          border-color: var(--color-white) transparent transparent transparent;
     }
}

/* ===================================================================
   ABBREVIATIONS (WCAG 3.1.4)
   =================================================================== */

abbr[title] {
     text-decoration: underline dotted;
     text-underline-offset: 2px;
     cursor: help;
}

@media (max-width: 1023px) {
     abbr[title] {
          text-decoration: none;
          cursor: auto;
     }
}

abbr[title]:hover,
abbr[title]:focus {
     text-decoration-style: solid;
}