/* ================================================================
   KITOTOOL — Typography (Vercel/Geist Design System)
   Version: 2.0 | 2026-04-12
   ================================================================ */

/* Heading reset — sizes controlled by variables.css */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* H1 page titles and hero headings share --font-bold (700), including mobile. */
h1 {
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-mega);
  line-height: 1.00;
}

/* H2 — Section Heading: 30px, weight 600 */
h2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.20;
}

/* H3 — Card Title: 24px, weight 600 */
h3 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
}

/* H4 — Sub-section: 20px, weight 600 */
h4 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-normal);
}

/* H5 — Small Heading: 18px, weight 500 */
h5 {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
}

/* H6 — Label: 16px, weight 500 */
h6 {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
}

/* Body text */
p {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
}

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

/* ===== TYPOGRAPHY UTILITIES ===== */
/* Shared small UI labels, counters and card titles use --font-semibold (600).
   Component styles set their own size; page headings retain their hierarchy. */

/* Size */
.text-xs    { font-size: var(--text-xs); }
.text-sm    { font-size: var(--text-sm); }
.text-base  { font-size: var(--text-base); }
.text-lg    { font-size: var(--text-lg); }
.text-xl    { font-size: var(--text-xl); }
.text-2xl   { font-size: var(--text-2xl); }
.text-3xl   { font-size: var(--text-3xl); }
.text-4xl   { font-size: var(--text-4xl); }
.text-5xl   { font-size: var(--text-5xl); }

/* Weight */
.font-normal   { font-weight: var(--font-normal); }
.font-medium   { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }

/* Color */
.text-primary   { color: var(--color-text); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }

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

/* Letter spacing */
.tracking-mega   { letter-spacing: var(--tracking-mega); }
.tracking-tight  { letter-spacing: var(--tracking-tight); }
.tracking-snug   { letter-spacing: var(--tracking-snug); }
.tracking-normal { letter-spacing: var(--tracking-normal); }

/* Line height */
.leading-none    { line-height: var(--leading-none); }
.leading-tight   { line-height: var(--leading-tight); }
.leading-snug   { line-height: var(--leading-snug); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed{ line-height: var(--leading-relaxed); }
.leading-loose  { line-height: var(--leading-loose); }

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

/* Links */
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary);
}

/* ===== RESPONSIVE TYPOGRAPHY ===== */
@media (max-width: 768px) {
  h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-tight); }
  h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-snug); }
  h3 { font-size: var(--text-xl); }
}

@media (max-width: 480px) {
  h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
  h2 { font-size: var(--text-2xl); }
}