/**
 * Typography System
 *
 * Defines typographic styles, hierarchies, and utilities.
 * Uses tokens from tokens.css for consistency across design systems.
 */

/* ==================== BASE TYPOGRAPHY ==================== */

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

/* ==================== HEADINGS ==================== */

/**
 * Heading hierarchy with semantic styling
 * Design systems can override these in their variant files
 */

h1, .h1 {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--spacing-lg);
}

h2, .h2 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--spacing-md);
}

h3, .h3 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: var(--spacing-md);
}

h4, .h4 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: var(--spacing-sm);
}

h5, .h5 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: var(--spacing-sm);
}

h6, .h6 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
}

/* ==================== BODY TEXT ==================== */

p {
  margin-bottom: var(--spacing-md);
}

.lead {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-lg);
}

.small,
small {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.tiny {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
}

/* ==================== EMPHASIS & INLINE ELEMENTS ==================== */

strong,
b {
  font-weight: var(--font-weight-bold);
}

em,
i {
  font-style: italic;
}

mark {
  background-color: var(--warning-light, #fde8a8);
  padding: 0.125em 0.25em;
}

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.125rem 0.375rem;
  background-color: var(--gray-100, #f1f3f4);
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  padding: var(--spacing-md);
  background-color: var(--gray-100, #f1f3f4);
  border-radius: var(--radius-base);
  overflow-x: auto;
  margin-bottom: var(--spacing-md);
}

pre code {
  padding: 0;
  background-color: transparent;
  border-radius: 0;
}

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

sub,
sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* ==================== QUOTES ==================== */

blockquote {
  margin: var(--spacing-lg) 0;
  padding-left: var(--spacing-lg);
  border-left: var(--border-width-thick) solid var(--gray-300, #dadce0);
  font-style: italic;
}

blockquote cite {
  display: block;
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-style: normal;
  color: var(--gray-600, #80868b);
}

q {
  quotes: """ """ "'" "'";
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

/* ==================== LISTS ==================== */

ul,
ol {
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

li {
  margin-bottom: var(--spacing-sm);
}

/* Nested lists */
ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
  margin-top: var(--spacing-sm);
}

/* Description lists */
dl {
  margin-bottom: var(--spacing-md);
}

dt {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-xs);
}

dd {
  margin-bottom: var(--spacing-sm);
  margin-left: var(--spacing-lg);
}

/* ==================== HORIZONTAL RULE ==================== */

hr {
  height: var(--border-width-thin);
  background-color: var(--gray-300, #dadce0);
  border: 0;
  margin: var(--spacing-xl) 0;
}

/* ==================== LINKS ==================== */

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-thin);
  text-underline-offset: 0.2em;
  transition: all var(--duration-normal) var(--ease-in-out);
}

a:hover {
  text-decoration-thickness: var(--border-width-medium);
}

a:active {
  opacity: 0.8;
}

/* ==================== UTILITY CLASSES ==================== */

/* Font families */
.font-sans {
  font-family: var(--font-sans);
}

.font-serif {
  font-family: var(--font-serif);
}

.font-mono {
  font-family: var(--font-mono);
}

/* Font weights */
.font-light {
  font-weight: var(--font-weight-light);
}

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

.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 sizes */
.text-xs {
  font-size: var(--font-size-xs);
}

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

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

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

.text-xl {
  font-size: var(--font-size-xl);
}

.text-2xl {
  font-size: var(--font-size-2xl);
}

.text-3xl {
  font-size: var(--font-size-3xl);
}

.text-4xl {
  font-size: var(--font-size-4xl);
}

.text-5xl {
  font-size: var(--font-size-5xl);
}

/* Line heights */
.leading-none {
  line-height: var(--line-height-none);
}

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

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

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

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

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

/* 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);
}

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

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

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

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

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

/* Text transform */
.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

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

/* Text decoration */
.underline {
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;
}

.no-underline {
  text-decoration: none;
}

/* Word break */
.break-normal {
  overflow-wrap: normal;
  word-break: normal;
}

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

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

/* Truncate text */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Line clamp (multi-line truncation) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==================== ACCESSIBLE FONT OPTIONS ==================== */

/**
 * Alternative font faces for users with specific needs
 * Can be applied via JavaScript based on user preference
 */

.font-dyslexic,
body.font-dyslexic {
  font-family: var(--font-accessible-dyslexic);
  letter-spacing: var(--letter-spacing-wider);
  word-spacing: 0.16em;
  line-height: var(--line-height-relaxed);
}

.font-accessible,
body.font-accessible {
  font-family: var(--font-accessible-inclusive);
  letter-spacing: var(--letter-spacing-wide);
}

/* ==================== READABILITY ENHANCEMENTS ==================== */

/**
 * Optimal line length for readability
 */
.measure {
  max-width: var(--measure-base);
}

.measure-narrow {
  max-width: var(--measure-narrow);
}

.measure-wide {
  max-width: var(--measure-wide);
}

/**
 * Responsive typography
 * Scales font size based on viewport width
 */
@media (min-width: 48em) {
  h1, .h1 {
    font-size: var(--font-size-6xl);
  }

  h2, .h2 {
    font-size: var(--font-size-5xl);
  }

  h3, .h3 {
    font-size: var(--font-size-4xl);
  }
}

/**
 * Print optimization
 */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  h1 {
    font-size: 24pt;
  }

  h2 {
    font-size: 20pt;
  }

  h3 {
    font-size: 18pt;
  }

  h4 {
    font-size: 16pt;
  }

  h5, h6 {
    font-size: 14pt;
  }
}