/* ============================================================
   BILHON OS Design System v2.0 — Typography
   Headings, text utilities, code blocks, font helpers.
   Prefix: .bl- / var(--bl-*)
   Author: Homer (Romulo Henricco)
   ============================================================ */

/* ── Headings ── */
h1, h2, h3, .bl-title, .bl-card-title, .bl-section-title {
  font-family: var(--bl-font-mono);
  letter-spacing: var(--bl-tracking-tight);
  line-height: var(--bl-leading-tight);
}

h1 {
  font-size: var(--bl-text-2xl);
  font-weight: 700;
  color: var(--bl-text-primary);
  text-shadow: 0 0 30px rgba(var(--bl-accent-rgb), 0.3),
               0 0 60px rgba(var(--bl-accent-rgb), 0.1);
}

h2 {
  font-size: var(--bl-text-xl);
  font-weight: 600;
  color: var(--bl-accent);
  text-shadow: 0 0 20px rgba(var(--bl-accent-rgb), 0.15);
}

h3 {
  font-size: var(--bl-text-lg);
  font-weight: 600;
  color: var(--bl-accent);
  margin-bottom: var(--bl-space-4);
}

h4 {
  font-size: var(--bl-text-md);
  font-weight: 600;
  color: var(--bl-text-primary);
}

h5 {
  font-size: var(--bl-text-base);
  font-weight: 600;
  color: var(--bl-text-secondary);
}

/* ── Card & Section Titles ── */
.bl-card-title {
  font-size: var(--bl-text-lg);
  font-weight: 600;
  color: var(--bl-accent);
}

.bl-section-title {
  font-size: var(--bl-text-md);
  font-weight: 600;
  color: var(--bl-accent);
  padding-left: var(--bl-space-3);
  border-left: 3px solid var(--bl-accent);
}

/* ── Monospace & Code ── */
.bl-data, .bl-mono, code, pre {
  font-family: var(--bl-font-mono-alt);
  font-size: var(--bl-text-base);
}

code {
  background: rgba(var(--bl-accent-rgb), 0.08);
  padding: 2px 6px;
  border-radius: var(--bl-radius-xs);
  color: var(--bl-accent);
}

pre {
  background: var(--bl-bg-4);
  padding: var(--bl-space-4);
  border-radius: var(--bl-radius-md);
  overflow-x: auto;
  border: 1px solid var(--bl-border-2);
}

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

/* ── UI Element Fonts ── */
.bl-btn, .bl-nav-item, .bl-label {
  font-family: var(--bl-font-sans);
}

/* ── Font Size Utilities ── */
.bl-text-xs  { font-size: var(--bl-text-xs); }
.bl-text-sm  { font-size: var(--bl-text-sm); }
.bl-text-base { font-size: var(--bl-text-base); }
.bl-text-md  { font-size: var(--bl-text-md); }
.bl-text-lg  { font-size: var(--bl-text-lg); }
.bl-text-xl  { font-size: var(--bl-text-xl); }
.bl-text-2xl { font-size: var(--bl-text-2xl); }

/* ── Text Color Utilities ── */
.bl-text-primary   { color: var(--bl-text-primary); }
.bl-text-secondary { color: var(--bl-text-secondary); }
.bl-text-muted     { color: var(--bl-text-muted); }
.bl-text-dim       { color: var(--bl-text-dim); }
.bl-text-ghost     { color: var(--bl-text-ghost); }
.bl-text-accent    { color: var(--bl-accent); }

/* ── Font Weight Utilities ── */
.bl-font-normal { font-weight: 400; }
.bl-font-medium { font-weight: 500; }
.bl-font-semi   { font-weight: 600; }
.bl-font-bold   { font-weight: 700; }

/* ── Text Transform Utilities ── */
.bl-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--bl-tracking-wider);
}

.bl-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}