/* ══════════════════════════════════════════════════════════════
   Theme Utility Classes (Release 17.5)
   
   Drop-in replacements for common inline style patterns.
   Every class uses CSS variables — works in ALL themes.
   
   Usage: class="theme-text-primary theme-bg-card theme-border"
   ══════════════════════════════════════════════════════════════ */

/* ── Theme-aware Text Colors ── */
.theme-text-primary { color: var(--text-primary, #e2e8f0) !important; }
.theme-text-secondary { color: var(--text-secondary, #94a3b8) !important; }
.theme-text-muted { color: var(--text-muted, #64748b) !important; }
.theme-text-inverse { color: var(--text-inverse, #0b1120) !important; }
.theme-text-link { color: var(--text-link, #818cf8) !important; }
.theme-text-success { color: var(--color-success, #059669) !important; }
.theme-text-warning { color: var(--color-warning, #d97706) !important; }
.theme-text-danger { color: var(--color-danger, #e11d48) !important; }
.theme-text-info { color: var(--color-info, #0891b2) !important; }

/* ── Theme-aware Backgrounds ── */
.theme-bg-page { background: var(--surface-page, #0b1120) !important; }
.theme-bg-card { background: var(--surface-card, rgba(255,255,255,0.03)) !important; }
.theme-bg-elevated { background: var(--surface-elevated, rgba(255,255,255,0.06)) !important; }
.theme-bg-overlay { background: var(--surface-overlay, rgba(255,255,255,0.04)) !important; }

/* ── Theme-aware Borders ── */
.theme-border { border: 1px solid var(--surface-border, rgba(255,255,255,0.06)) !important; }
.theme-border-bottom { border-bottom: 1px solid var(--surface-border, rgba(255,255,255,0.06)) !important; }
.theme-border-top { border-top: 1px solid var(--surface-border, rgba(255,255,255,0.06)) !important; }

/* ── Theme-aware Cards ── */
.theme-card {
  border-radius: var(--radius-md, 12px) !important;
  border: 1px solid var(--surface-border, rgba(255,255,255,0.06)) !important;
  background: var(--surface-card, rgba(255,255,255,0.03)) !important;
  transition: all 0.2s ease !important;
}

/* ── Theme-aware Buttons ── */
.theme-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: var(--btn-height, 44px) !important;
  padding: 10px 22px !important;
  border-radius: var(--radius-sm, 6px) !important;
  font-size: var(--font-supporting, 15px) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  cursor: pointer !important;
  transition: all var(--transition-fast, 0.15s) ease !important;
  text-decoration: none !important;
}
.theme-btn-primary {
  background: var(--color-primary, #6366f1) !important;
  color: #fff !important;
  border: none !important;
}
.theme-btn-primary:hover {
  background: var(--color-primary-hover, #4f46e5) !important;
  box-shadow: var(--shadow-glow-primary, none) !important;
  transform: translateY(-1px) !important;
}
.theme-btn-secondary {
  background: var(--color-primary-subtle, rgba(99,102,241,0.06)) !important;
  color: var(--color-secondary, #818cf8) !important;
  border: 1px solid var(--color-primary-light, rgba(99,102,241,0.15)) !important;
}
.theme-btn-ghost {
  background: transparent !important;
  color: var(--text-secondary, #94a3b8) !important;
  border: 1px solid var(--surface-border, rgba(255,255,255,0.06)) !important;
}

/* ── Theme-aware Badges ── */
.theme-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-sm, 6px) !important;
  font-size: var(--font-caption, 13px) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  border: 1px solid !important;
}
.theme-badge-success {
  background: var(--color-success-subtle, rgba(5,150,105,0.06)) !important;
  color: var(--color-success, #059669) !important;
  border-color: var(--color-success-light, rgba(5,150,105,0.15)) !important;
}
.theme-badge-warning {
  background: var(--color-warning-subtle, rgba(217,119,6,0.06)) !important;
  color: var(--color-warning, #d97706) !important;
  border-color: var(--color-warning-light, rgba(217,119,6,0.15)) !important;
}
.theme-badge-danger {
  background: var(--color-danger-subtle, rgba(225,29,72,0.06)) !important;
  color: var(--color-danger, #e11d48) !important;
  border-color: var(--color-danger-light, rgba(225,29,72,0.15)) !important;
}
.theme-badge-info {
  background: var(--color-info-light, rgba(8,145,178,0.15)) !important;
  color: var(--color-info, #0891b2) !important;
  border-color: var(--color-info-light, rgba(8,145,178,0.15)) !important;
}

/* ── Theme-aware Typography Scale ── */
.theme-font-kpi { font-size: var(--font-display-kpi, 48px) !important; font-weight: var(--font-weight-extrabold, 800) !important; line-height: 1 !important; letter-spacing: var(--letter-spacing-tight, -0.03em) !important; }
.theme-font-page-title { font-size: var(--font-page-title, 40px) !important; font-weight: var(--font-weight-extrabold, 800) !important; letter-spacing: var(--letter-spacing-tight, -0.03em) !important; }
.theme-font-section-title { font-size: var(--font-section-title, 32px) !important; font-weight: var(--font-weight-extrabold, 800) !important; letter-spacing: -0.02em !important; }
.theme-font-card-title { font-size: var(--font-card-title, 22px) !important; font-weight: var(--font-weight-bold, 700) !important; }
.theme-font-subheading { font-size: var(--font-subheading, 18px) !important; font-weight: var(--font-weight-semibold, 600) !important; }
.theme-font-body { font-size: var(--font-body, 16px) !important; font-weight: var(--font-weight-normal, 400) !important; line-height: var(--line-height-relaxed, 1.7) !important; }
.theme-font-supporting { font-size: var(--font-supporting, 15px) !important; }
.theme-font-caption { font-size: var(--font-caption, 13px) !important; }
.theme-font-micro { font-size: var(--font-micro, 11px) !important; }

/* ── Layout Utilities ── */
.theme-flex-center { display: flex !important; align-items: center !important; justify-content: center !important; }
.theme-flex-between { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.theme-flex-gap-sm { gap: 8px !important; }
.theme-flex-gap-md { gap: 16px !important; }
.theme-flex-gap-lg { gap: 24px !important; }
.theme-container { max-width: 1280px !important; margin: 0 auto !important; padding: 0 24px !important; }
.theme-section-padding { padding: 24px 28px !important; }
.theme-section-spacing { margin-bottom: 40px !important; }