/**
 * Typography
 * Kingshot Alliance Tools Design System
 *
 * Font stack, line heights, and heading scales.
 */

/* ========================================
   BASE TYPOGRAPHY
   ======================================== */
html {
  font-size: 16px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
}

/* ========================================
   HEADINGS
   ======================================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

h1 {
  font-size: 2rem;     /* 32px */
  letter-spacing: -0.02em;
}

h2 {
  font-size: 1.5rem;   /* 24px */
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.25rem;  /* 20px */
}

h4 {
  font-size: 1.125rem; /* 18px */
}

h5 {
  font-size: 1rem;     /* 16px */
}

h6 {
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
}

/* Responsive heading sizes */
@media (min-width: 860px) {
  h1 {
    font-size: 2.5rem;   /* 40px */
  }

  h2 {
    font-size: 2rem;     /* 32px */
  }

  h3 {
    font-size: 1.5rem;   /* 24px */
  }
}

/* ========================================
   TEXT STYLES
   ======================================== */
p {
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: 600;
}

small {
  font-size: 0.875rem; /* 14px */
}

/* ========================================
   LINKS
   ======================================== */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r4);
}

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

/* Font sizes */
.text-xs { font-size: 0.75rem; }    /* 12px */
.text-sm { font-size: 0.875rem; }   /* 14px */
.text-base { font-size: 1rem; }     /* 16px */
.text-lg { font-size: 1.125rem; }   /* 18px */
.text-xl { font-size: 1.25rem; }    /* 20px */
.text-2xl { font-size: 1.5rem; }    /* 24px */
.text-3xl { font-size: 2rem; }      /* 32px */

/* Font weights */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Text colors */
.text-default { color: var(--text); }
.text-muted { color: var(--muted); }
.text-faint { color: var(--faint); }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-info { color: var(--info); }

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

/* Text transform */
.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.capitalize {
  text-transform: capitalize;
}

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

.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;
}

/* ========================================
   MONOSPACE / CODE
   ======================================== */
code, kbd, samp, pre {
  font-family: 'SF Mono', 'Consolas', 'Liberation Mono', Menlo, Courier, monospace;
  font-size: 0.875em;
}

code {
  padding: 0.125em 0.375em;
  background: var(--surface);
  border-radius: var(--r4);
}

pre {
  padding: var(--space-4);
  background: var(--surface);
  border-radius: var(--r8);
  overflow-x: auto;
}

pre code {
  padding: 0;
  background: none;
}

/* ========================================
   SECTION LABELS
   ======================================== */
.section-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.section-label::before,
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stroke), transparent);
}

/* Section label without lines */
.section-label-plain {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-4);
}