/* ============================================================
   WEGEMS STUDIO — typography.css
   Heading classes, body text classes, and inline text utilities.
   @font-face declarations live in reset.css.
   ============================================================ */


/* --- Base Body Typography --- */

body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: 500;
  line-height: var(--lh-relaxed);
  color: var(--color-text-body);
  background-color: var(--color-bg-primary);
}


/* --- Heading Classes --- */

.heading-1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--color-text-heading);
}

.heading-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--color-text-heading);
}

.heading-3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--color-text-heading);
}

.heading-4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h4);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--color-text-heading);
}

.heading-5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h5);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--color-text-heading);
}

.heading-6 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-h6);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-normal);
  color: var(--color-text-heading);
}


/* --- Body & Text Classes --- */

.text-subheadline {
  font-family: var(--font-body);
  font-weight: 500;
  font-style: italic;
  font-size: var(--text-subhead);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--color-text-body);
}

.text-body-large {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body-lg);
  line-height: 1.4;   /* 140% */
  letter-spacing: var(--ls-normal);
  color: var(--color-text-body);
}

.text-body-medium {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body-md);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
  color: var(--color-text-body);
}

.text-body-small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body-sm);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--color-text-body);
}


/* --- Inline Text Utilities --- */

.text-highlight {
  background: var(--color-primary);
  color: var(--color-text-dark);
  border-radius: 0.25rem;
  padding: 0 0.25rem;
}

.text-accent {
  color: var(--color-accent);
}


/* ============================================================
   TYPOGRAPHY — RESPONSIVE
   Global heading and body text size overrides per breakpoint.
   ============================================================ */

@media (max-width: 991px) {

  .heading-1 { font-size: 3rem; }        /* 48px */
  .heading-2 { font-size: 2.5rem; }      /* 40px */
  .heading-3 { font-size: 2rem; }        /* 32px */
  .heading-4 { font-size: 1.75rem; }     /* 28px */
  .heading-5 { font-size: 1.5rem; }      /* 24px */
  .heading-6 { font-size: 1.125rem; }    /* 18px */

  .text-body-large  { font-size: 1.125rem; }   /* 18px */
  .text-body-medium { font-size: 1rem; }        /* 16px */
  .text-body-small  { font-size: 0.9375rem; }   /* 15px */
}

@media (max-width: 767px) {

  .heading-1 { font-size: 2.5rem; }      /* 40px */
  .heading-2 { font-size: 2rem; }        /* 32px */
  .heading-3 { font-size: 1.75rem; }     /* 28px */
  .heading-4 { font-size: 1.5rem; }      /* 24px */
  .heading-5 { font-size: 1.25rem; }     /* 20px */
  .heading-6 { font-size: 1rem; }        /* 16px */

  .text-body-large  { font-size: 1.125rem; }    /* 18px */
  .text-body-medium { font-size: 0.9375rem; }   /* 15px */
  .text-body-small  { font-size: 0.875rem; }    /* 14px */
}

@media (max-width: 479px) {

  .heading-1 { font-size: 2rem; }        /* 32px */
  .heading-2 { font-size: 1.75rem; }     /* 28px */
  .heading-3 { font-size: 1.5rem; }      /* 24px */
  .heading-4 { font-size: 1.25rem; }     /* 20px */
  .heading-5 { font-size: 1.125rem; }    /* 18px */
  .heading-6 { font-size: 1rem; }        /* 16px */

  .text-body-large  { font-size: 1rem; }        /* 16px */
  .text-body-medium { font-size: 0.9375rem; }   /* 15px */
  .text-body-small  { font-size: 0.875rem; }    /* 14px */
}