/* =========================================================
   CODERN
   Typography System
   File: css/typography.css
   Version: 3.0.0

   Theme Support:
   - Dark Mode = Original Codern theme
   - Light Mode = Clean white theme
   - Typography colors are controlled by variables.css
   - Responsive typography
   - Accessible focus and readable contrast
   ========================================================= */


/* ---------------------------------------------------------
   1. BASE TYPOGRAPHY
   --------------------------------------------------------- */

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-normal);

  color: var(--color-text);

  transition:
    color var(--theme-transition-duration, 300ms)
      var(--theme-transition-easing, ease);
}


/* ---------------------------------------------------------
   2. HEADINGS
   --------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;

  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-tight);

  color: var(--color-heading);

  text-wrap: balance;

  transition:
    color var(--theme-transition-duration, 300ms)
      var(--theme-transition-easing, ease);
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

h5 {
  font-size: var(--font-size-h5);
}

h6 {
  font-size: var(--font-size-h6);
}


/* ---------------------------------------------------------
   3. DISPLAY HEADINGS
   --------------------------------------------------------- */

.display-1,
.display-2,
.display-3 {
  font-family: var(--font-family-heading);

  color: var(--color-heading);

  text-wrap: balance;

  transition:
    color var(--theme-transition-duration, 300ms)
      var(--theme-transition-easing, ease);
}

.display-1 {
  font-size: var(--font-size-display-1);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tighter);
}

.display-2 {
  font-size: var(--font-size-display-2);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tighter);
}

.display-3 {
  font-size: var(--font-size-display-3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}


/* ---------------------------------------------------------
   4. BODY TEXT
   --------------------------------------------------------- */

p {
  color: var(--color-text);
  line-height: var(--line-height-relaxed);

  transition:
    color var(--theme-transition-duration, 300ms)
      var(--theme-transition-easing, ease);
}

.lead {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.body-large {
  font-size: var(--font-size-lg);
}

.body-small {
  font-size: var(--font-size-sm);
}

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

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

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

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


/* ---------------------------------------------------------
   5. TEXT WEIGHTS
   --------------------------------------------------------- */

.font-light {
  font-weight: var(--font-weight-light);
}

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

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

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.font-extrabold {
  font-weight: var(--font-weight-extrabold);
}


/* ---------------------------------------------------------
   6. TEXT ALIGNMENT
   --------------------------------------------------------- */

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

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

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

.text-justify {
  text-align: justify;
}


/* ---------------------------------------------------------
   7. TEXT TRANSFORMATION
   --------------------------------------------------------- */

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

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

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

.text-normal {
  text-transform: none;
}


/* ---------------------------------------------------------
   8. LETTER SPACING
   --------------------------------------------------------- */

.tracking-tighter {
  letter-spacing: var(--letter-spacing-tighter);
}

.tracking-tight {
  letter-spacing: var(--letter-spacing-tight);
}

.tracking-normal {
  letter-spacing: var(--letter-spacing-normal);
}

.tracking-wide {
  letter-spacing: var(--letter-spacing-wide);
}

.tracking-wider {
  letter-spacing: var(--letter-spacing-wider);
}


/* ---------------------------------------------------------
   9. LINE HEIGHT
   --------------------------------------------------------- */

.leading-none {
  line-height: 1;
}

.leading-tight {
  line-height: var(--line-height-tight);
}

.leading-normal {
  line-height: var(--line-height-base);
}

.leading-relaxed {
  line-height: var(--line-height-relaxed);
}

.leading-loose {
  line-height: var(--line-height-loose);
}


/* ---------------------------------------------------------
   10. LINKS
   --------------------------------------------------------- */

.text-link {
  color: var(--color-primary);

  font-weight: var(--font-weight-medium);

  text-decoration: none;

  transition:
    color var(--transition-fast),
    opacity var(--transition-fast);
}

.text-link:hover {
  color: var(--color-primary-hover);
}

.text-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}


/* ---------------------------------------------------------
   11. EYEBROW / LABEL
   --------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;

  margin-bottom: var(--space-3);

  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;

  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;

  color: var(--color-primary);

  transition:
    color var(--theme-transition-duration, 300ms)
      var(--theme-transition-easing, ease);
}


/* ---------------------------------------------------------
   12. SECTION TITLE
   --------------------------------------------------------- */

.section-title {
  max-width: 800px;

  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);

  color: var(--color-heading);

  text-wrap: balance;
}

.section-description {
  max-width: 680px;
  margin-top: var(--space-4);

  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);

  color: var(--color-text-secondary);

  text-wrap: pretty;
}


/* ---------------------------------------------------------
   13. GRADIENT TEXT
   --------------------------------------------------------- */

.gradient-text {
  display: inline;

  background: var(--gradient-primary);

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
  color: transparent;

  background-size: 200% auto;
}


/* ---------------------------------------------------------
   14. CODE & MONOSPACE
   --------------------------------------------------------- */

code,
kbd,
samp,
pre {
  font-family: var(--font-family-mono);
}

.code-text {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
}

code {
  padding: 0.15em 0.35em;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-xs);

  background: var(--color-surface-alt);
  color: var(--color-primary);

  transition:
    background-color var(--theme-transition-duration, 300ms)
      var(--theme-transition-easing, ease),
    border-color var(--theme-transition-duration, 300ms)
      var(--theme-transition-easing, ease),
    color var(--theme-transition-duration, 300ms)
      var(--theme-transition-easing, ease);
}

pre {
  margin: 0;
  padding: var(--space-5);

  overflow-x: auto;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);

  background: var(--color-surface-alt);
  color: var(--color-text);

  font-size: var(--font-size-sm);
  line-height: 1.7;

  -webkit-overflow-scrolling: touch;

  transition:
    background-color var(--theme-transition-duration, 300ms)
      var(--theme-transition-easing, ease),
    border-color var(--theme-transition-duration, 300ms)
      var(--theme-transition-easing, ease),
    color var(--theme-transition-duration, 300ms)
      var(--theme-transition-easing, ease);
}

pre code {
  padding: 0;

  border: 0;

  background: transparent;
  color: inherit;
}


/* ---------------------------------------------------------
   15. KEYBOARD TEXT
   --------------------------------------------------------- */

kbd {
  display: inline-block;

  padding: 0.15em 0.4em;

  border: 1px solid var(--color-border);
  border-bottom-width: 2px;

  border-radius: var(--radius-xs);

  background: var(--color-surface-alt);
  color: var(--color-text);

  font-size: 0.85em;
  line-height: 1.2;

  transition:
    background-color var(--theme-transition-duration, 300ms)
      var(--theme-transition-easing, ease),
    border-color var(--theme-transition-duration, 300ms)
      var(--theme-transition-easing, ease),
    color var(--theme-transition-duration, 300ms)
      var(--theme-transition-easing, ease);
}


/* ---------------------------------------------------------
   16. QUOTES
   --------------------------------------------------------- */

blockquote {
  margin: 0;
  padding-left: var(--space-5);

  border-left: 3px solid var(--color-primary);

  color: var(--color-text-secondary);

  font-size: var(--font-size-lg);
  font-style: italic;
  line-height: var(--line-height-relaxed);
}


/* ---------------------------------------------------------
   17. LIST TEXT
   --------------------------------------------------------- */

.list-text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);

  color: var(--color-text);
}

.list-text strong {
  color: var(--color-heading);
}


/* ---------------------------------------------------------
   18. TRUNCATION
   --------------------------------------------------------- */

.text-truncate {
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.line-clamp-2,
.line-clamp-3 {
  display: -webkit-box;

  overflow: hidden;

  -webkit-box-orient: vertical;
}

.line-clamp-2 {
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  -webkit-line-clamp: 3;
}


/* ---------------------------------------------------------
   19. WORD BREAK / WRAPPING
   --------------------------------------------------------- */

.text-wrap {
  white-space: normal;
  overflow-wrap: break-word;
}

.text-nowrap {
  white-space: nowrap;
}

.break-word {
  overflow-wrap: break-word;
  word-break: break-word;
}

.break-all {
  word-break: break-all;
}


/* ---------------------------------------------------------
   20. RESPONSIVE TYPOGRAPHY
   --------------------------------------------------------- */

@media (max-width: 1024px) {

  .display-1 {
    font-size: clamp(
      var(--font-size-display-3),
      7vw,
      var(--font-size-display-1)
    );
  }

  .display-2 {
    font-size: clamp(
      var(--font-size-h1),
      6vw,
      var(--font-size-display-2)
    );
  }

}


/* ---------------------------------------------------------
   21. TABLET / MOBILE TYPOGRAPHY
   --------------------------------------------------------- */

@media (max-width: 768px) {

  h1 {
    font-size: clamp(
      2rem,
      8vw,
      var(--font-size-h1)
    );
  }

  h2 {
    font-size: clamp(
      1.75rem,
      6vw,
      var(--font-size-h2)
    );
  }

  h3 {
    font-size: clamp(
      1.4rem,
      5vw,
      var(--font-size-h3)
    );
  }

  .display-1 {
    font-size: clamp(
      2.5rem,
      12vw,
      var(--font-size-display-1)
    );
  }

  .display-2 {
    font-size: clamp(
      2.25rem,
      10vw,
      var(--font-size-display-2)
    );
  }

  .display-3 {
    font-size: clamp(
      2rem,
      8vw,
      var(--font-size-display-3)
    );
  }

  .lead {
    font-size: var(--font-size-base);
  }

  .section-description {
    font-size: var(--font-size-base);
  }

}


/* ---------------------------------------------------------
   22. SMALL MOBILE TYPOGRAPHY
   --------------------------------------------------------- */

@media (max-width: 480px) {

  .display-1 {
    font-size: clamp(
      2.2rem,
      13vw,
      4rem
    );
  }

  .display-2 {
    font-size: clamp(
      2rem,
      11vw,
      3.5rem
    );
  }

  .display-3 {
    font-size: clamp(
      1.8rem,
      9vw,
      3rem
    );
  }

  .eyebrow {
    font-size: 0.7rem;
    letter-spacing: var(--letter-spacing-wide);
  }

  .section-title {
    max-width: 100%;
  }

}


/* ---------------------------------------------------------
   23. EXTRA SMALL DEVICES
   --------------------------------------------------------- */

@media (max-width: 360px) {

  .display-1 {
    font-size: 2.15rem;
  }

  .display-2 {
    font-size: 1.95rem;
  }

  .display-3 {
    font-size: 1.75rem;
  }

}


/* ---------------------------------------------------------
   24. REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .text-link,
  .gradient-text,
  code,
  pre,
  kbd {
    transition: none;
  }

}