/* ==========================================================================
   GAAB Website — Typography
   Inter only. Two weights only: 400 (regular), 500 (medium).
   Emphasis comes from SIZE, never from heavy weight.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Base body inherits font-family + body size from variables.css.
   These rules establish the heading + utility classes used across the site.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

p {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
}


/* --------------------------------------------------------------------------
   TYPE SCALE — heading classes
   Use these classes (not the bare tags) when you want a specific scale step
   independent of the semantic level.
   -------------------------------------------------------------------------- */

.t-hero,
h1.t-hero {
  font-size: var(--text-hero);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.t-h2,
h2.t-h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.t-h3,
h3.t-h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}

.t-body-lg {
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
}

.t-body {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

.t-small {
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  line-height: 1.4;
}

.t-micro {
  font-size: var(--text-micro);
  font-weight: var(--weight-regular);
  line-height: 1.4;
}


/* --------------------------------------------------------------------------
   LABEL — uppercase metadata, used sparingly
   -------------------------------------------------------------------------- */

.t-label {
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-secondary);
}


/* --------------------------------------------------------------------------
   COLOR & WEIGHT UTILITIES
   -------------------------------------------------------------------------- */

.t-muted    { color: var(--color-text-secondary); }
.t-inverse  { color: var(--color-text-inverse); }
.t-accent   { color: var(--color-blue-gaab); }

.t-regular  { font-weight: var(--weight-regular); }
.t-medium   { font-weight: var(--weight-medium); }


/* --------------------------------------------------------------------------
   ALIGNMENT UTILITIES
   -------------------------------------------------------------------------- */

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


/* --------------------------------------------------------------------------
   LINKS — inline text links default to blue accent
   -------------------------------------------------------------------------- */

a.t-link,
.t-link a {
  color: var(--color-blue-gaab);
  transition: opacity var(--duration-fast) var(--ease-out);
}

a.t-link:hover,
.t-link a:hover {
  opacity: 0.7;
}


/* --------------------------------------------------------------------------
   SELECTION — subtle, on-brand
   -------------------------------------------------------------------------- */

::selection {
  background: var(--color-blue-gaab);
  color: var(--color-white);
}