@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Typography ─────────────────────────────── */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   15px;
  --text-xl:   16px;
  --text-2xl:  18px;
  --text-3xl:  20px;
  --text-4xl:  24px;

  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* ── Color Palette: Primary (Blue) ──────────── */
  --primary-50:  #EFF6FF;
  --primary-100: #DBEAFE;
  --primary-200: #BFDBFE;
  --primary-300: #93C5FD;
  --primary-400: #60A5FA;
  --primary-500: #3B82F6;
  --primary-600: #2563EB;
  --primary-700: #1D4ED8;
  --primary-800: #1E40AF;
  --primary-900: #1E3A8A;

  /* ── Color Palette: Neutral (Slate) ─────────── */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* ── Color Palette: Gray ────────────────────── */
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;

  /* ── Color Palette: Purple ──────────────────── */
  --purple-50:  #FAF5FF;
  --purple-100: #EDE9FE;
  --purple-200: #DDD6FE;
  --purple-300: #C4B5FD;
  --purple-400: #A78BFA;
  --purple-500: #8B5CF6;
  --purple-600: #7C3AED;

  /* ── Color Palette: Indigo ──────────────────── */
  --indigo-50:  #EEF2FF;
  --indigo-100: #E0E7FF;
  --indigo-300: #A5B4FC;
  --indigo-400: #818CF8;
  --indigo-500: #6366F1;
  --indigo-700: #4338CA;

  /* ── Color Palette: Sky ─────────────────────── */
  --sky-50:  #F0F9FF;
  --sky-100: #E0F2FE;
  --sky-300: #BAE6FD;
  --sky-500: #0EA5E9;
  --sky-600: #0284C7;
  --sky-700: #0369A1;

  /* ── Color Palette: Cyan ────────────────────── */
  --cyan-50:  #ECFEFF;
  --cyan-300: #67E8F9;
  --cyan-500: #06B6D4;
  --cyan-600: #0891B2;

  /* ── Color Palette: Teal ────────────────────── */
  --teal-50:  #F0FDFA;
  --teal-600: #0D9488;

  /* ── Color Palette: Emerald ─────────────────── */
  --emerald-50:  #ECFDF5;
  --emerald-200: #A7F3D0;
  --emerald-400: #34D399;
  --emerald-500: #10B981;
  --emerald-800: #065F46;

  /* ── Color Palette: Green ───────────────────── */
  --green-50:  #E8F5E9;
  --green-700: #2E7D32;

  /* ── Status: Success (Green) ────────────────── */
  --success-50:  #F0FDF4;
  --success-100: #D1FAE5;
  --success-200: #BBF7D0;
  --success-500: #059669;
  --success-600: #047857;

  /* ── Status: Warning (Amber) ────────────────── */
  --warning-50:  #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-200: #FDE68A;
  --warning-400: #FBBF24;
  --warning-500: #D97706;
  --warning-600: #B45309;

  /* ── Status: Danger (Red) ───────────────────── */
  --danger-50:  #FEF2F2;
  --danger-100: #FEE2E2;
  --danger-200: #FECACA;
  --danger-300: #FCA5A5;
  --danger-400: #F87171;
  --danger-500: #DC2626;
  --danger-600: #B91C1C;

  /* ── Status: Orange ─────────────────────────── */
  --orange-50:  #FFF7ED;
  --orange-100: #FED7AA;
  --orange-300: #FDBA74;
  --orange-500: #C2410C;
  --orange-600: #9A3412;

  /* ── Color Palette: Amber ───────────────────── */
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-800: #92400E;

  /* ── Color Palette: Red ─────────────────────── */
  --red-300: #FCA5A5;
  --red-400: #F87171;
  --red-500: #EF4444;

  /* ── Color Palette: Stone ───────────────────── */
  --stone-50:  #FAFAF9;
  --stone-500: #78716C;

  /* ── Color Palette: Brown ───────────────────── */
  --brown-200: #D7CCC8;
  --brown-400: #8D6E63;
  --brown-700: #5D4037;

  /* ── Custom: Navy (dark gradient stops) ─────── */
  --navy-900: #1a1a2e;
  --navy-800: #16213e;
  --navy-700: #1E3A5F;

  /* ── Custom: Deep Orange ────────────────────── */
  --deep-orange-600: #E65100;
  --orange-tw-500:   #F97316;
  --orange-tw-600:   #EA580C;

  /* ── Semantic Role Tokens ───────────────────── */
  --bg-page:           var(--slate-50);
  --bg-card:           #FFFFFF;
  --bg-input:          #FFFFFF;
  --bg-muted:          var(--slate-100);
  --bg-hover:          var(--slate-50);
  --bg-active:         var(--primary-50);
  --bg-dark:           var(--slate-800);
  --bg-dark-secondary: #293548;

  --text:              var(--slate-900);
  --text-primary:      var(--slate-900);
  --text-secondary:    var(--slate-800);
  --text-tertiary:     var(--slate-600);
  --text-muted:        var(--slate-500);
  --text-faint:        var(--slate-400);
  --text-on-dark:      var(--slate-50);
  --text-on-dark-muted: var(--slate-400);
  --text-inverse:      #FFFFFF;

  --border:            var(--slate-200);
  --border-subtle:     var(--slate-100);
  --border-strong:     var(--slate-300);
  --border-focus:      var(--primary-600);

  --link:              var(--primary-600);
  --link-hover:        var(--primary-700);

  /* ── Gradient Stops ────────────────────────────*/
  --gradient-dark-start: var(--navy-900);
  --gradient-dark-end:   var(--navy-800);
  --gradient-light-start: #FAFBFF;
  --gradient-light-mid:   var(--indigo-50);

  /* ── Breakpoint Tokens ──────────────────────── */
  --bp-xl:   1100px;
  --bp-lg:   900px;
  --bp-md:   768px;
  --bp-sm:   640px;
  --bp-xs:   480px;

  /* ── Mobile Spacing ───────────────────────────── */
  --mobile-padding: 16px;
  --mobile-gap: 12px;

  /* ── Spacing Scale ──────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Border Radius Scale ────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   10px;
  --radius-2xl:  12px;
  --radius-3xl:  16px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, .05);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, .06);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, .08);
  --shadow-lg:    0 4px 24px rgba(0, 0, 0, .08);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, .12);

  /* ── Transitions ────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}

/* ═══════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════ */
[data-theme="dark"] {

  /* ── Semantic Role Tokens ───────────────────── */
  --bg-page:           #0B1120;
  --bg-card:           #1E293B;
  --bg-input:          #15202e;
  --bg-muted:          #1E293B;
  --bg-hover:          #253348;
  --bg-active:         #172554;
  --bg-dark:           #020617;
  --bg-dark-secondary: #0F172A;

  --text:              #F8FAFC;
  --text-primary:      #F8FAFC;
  --text-secondary:    #F1F5F9;
  --text-tertiary:     #CBD5E1;
  --text-muted:        #94A3B8;
  --text-faint:        #64748B;
  --text-on-dark:      #F8FAFC;
  --text-on-dark-muted: #94A3B8;
  --text-inverse:      #FFFFFF;

  --border:            #334155;
  --border-subtle:     #1E293B;
  --border-strong:     #475569;
  --border-focus:      #3B82F6;

  --link:              #60A5FA;
  --link-hover:        #93C5FD;

  /* ── Shadows (stronger for dark surfaces) ───── */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, .35);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, .4);
  --shadow-lg:    0 4px 24px rgba(0, 0, 0, .45);
  --shadow-focus: 0 0 0 3px rgba(59, 130, 246, .3);

  /* ── Primary (Blue) — darken light shades ───── */
  --primary-50:  #0c1929;
  --primary-100: #0f2744;
  --primary-200: #1e3a5f;

  /* ── Slate — adjust for dark context ─────────── */
  --slate-50:  #1E293B;
  --slate-100: #1E293B;
  --slate-200: #334155;
  --slate-300: #475569;

  /* ── Gray ────────────────────────────────────── */
  --gray-300: #4B5563;
  --gray-400: #9CA3AF;
  --gray-500: #D1D5DB;

  /* ── Purple ──────────────────────────────────── */
  --purple-50:  #1a0f2e;
  --purple-100: #2e1065;
  --purple-200: #3b1f8a;
  --purple-300: #7c5cbf;

  /* ── Indigo ──────────────────────────────────── */
  --indigo-50:  #14142e;
  --indigo-100: #1e1b4b;
  --indigo-500: #818CF8;
  --indigo-700: #A5B4FC;

  /* ── Sky ─────────────────────────────────────── */
  --sky-50:  #0c1929;
  --sky-100: #0c4a6e;
  --sky-300: #38BDF8;
  --sky-600: #38BDF8;
  --sky-700: #7DD3FC;

  /* ── Cyan ────────────────────────────────────── */
  --cyan-50:  #0a1e22;
  --cyan-300: #67E8F9;
  --cyan-500: #22D3EE;
  --cyan-600: #06B6D4;

  /* ── Teal ────────────────────────────────────── */
  --teal-50:  #0a1f1d;
  --teal-600: #14B8A6;

  /* ── Emerald ─────────────────────────────────── */
  --emerald-50:  #052e1c;
  --emerald-200: #065F46;
  --emerald-800: #34D399;

  /* ── Green ───────────────────────────────────── */
  --green-50:  #0a200e;
  --green-700: #4ADE80;

  /* ── Success ─────────────────────────────────── */
  --success-50:  #052e1c;
  --success-100: #064e3b;
  --success-200: #065F46;
  --success-500: #34D399;
  --success-600: #10B981;

  /* ── Warning ─────────────────────────────────── */
  --warning-50:  #1c1204;
  --warning-100: #451a03;
  --warning-200: #78350F;
  --warning-400: #FBBF24;
  --warning-500: #FBBF24;
  --warning-600: #F59E0B;

  /* ── Danger ──────────────────────────────────── */
  --danger-50:  #1f0a0a;
  --danger-100: #450a0a;
  --danger-200: #7F1D1D;
  --danger-300: #DC2626;
  --danger-400: #F87171;
  --danger-500: #F87171;
  --danger-600: #EF4444;

  /* ── Orange ──────────────────────────────────── */
  --orange-50:  #1c1004;
  --orange-100: #431407;
  --orange-300: #EA580C;
  --orange-500: #F97316;
  --orange-600: #FB923C;

  /* ── Amber ───────────────────────────────────── */
  --amber-600: #FBBF24;
  --amber-800: #F59E0B;

  /* ── Red ─────────────────────────────────────── */
  --red-500: #F87171;

  /* ── Stone ───────────────────────────────────── */
  --stone-50:  #1c1a17;
  --stone-500: #A8A29E;

  /* ── Brown ───────────────────────────────────── */
  --brown-200: #3e2723;
  --brown-400: #A1887F;
  --brown-700: #BCAAA4;

  /* ── Navy ────────────────────────────────────── */
  --navy-900: #0B1120;
  --navy-800: #131c30;
  --navy-700: #1E3A5F;

  /* ── Deep Orange ─────────────────────────────── */
  --deep-orange-600: #FB923C;

  /* ── Gradient Stops ────────────────────────────*/
  --gradient-dark-start: #050a18;
  --gradient-dark-end:   #0B1120;
  --gradient-light-start: #0F172A;
  --gradient-light-mid:   #14142e;
}

/* ═══════════════════════════════════════════════════
   FORM ELEMENT DEFAULTS
   Browsers don't inherit body color on form controls,
   so we set it explicitly for both light & dark mode.
   ═══════════════════════════════════════════════════ */
input, select, textarea, option {
  color: var(--text-primary);
  background-color: var(--bg-card);
}

/* ═══════════════════════════════════════════════════
   SHARED COMPONENT STYLES
   Reusable classes for buttons, badges, cards, etc.
   ═══════════════════════════════════════════════════ */

/* ── Focus Ring ──────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: 1;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  -webkit-user-select: none;
  user-select: none;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary   { background: var(--primary-600); color: var(--text-inverse); }
.btn-primary:hover:not(:disabled) { background: var(--primary-700); }
.btn-secondary { background: var(--bg-muted); color: var(--text-muted); border: 1px solid var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--border); }
.btn-danger    { background: var(--danger-100); color: var(--danger-500); }
.btn-danger:hover:not(:disabled) { background: var(--danger-200); }
.btn-sm { padding: 5px 12px; font-size: var(--text-sm); }

/* ── Badges ──────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: .3px;
  line-height: 1.6;
  white-space: nowrap;
}
.badge-green  { background: var(--success-100); color: var(--success-500); }
.badge-blue   { background: var(--primary-100); color: var(--primary-600); }
.badge-amber  { background: var(--warning-100); color: var(--warning-500); }
.badge-red    { background: var(--danger-100);  color: var(--danger-500); }
.badge-orange { background: var(--orange-50);   color: var(--orange-500); }
.badge-slate  { background: var(--slate-200);   color: var(--text-muted); }

/* ── Cards ───────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

/* ── Score Cards ─────────────────────────────────── */
.scores      { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.scores-4    { grid-template-columns: repeat(4, 1fr); }
.score-card  {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 16px 18px;
}
.score-card .label { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: 4px; }
.score-card .value { font-size: 28px; font-weight: var(--font-extrabold); color: var(--text-primary); }

/* ── Loading Spinner ─────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--primary-600);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
.spinner-lg { width: 24px; height: 24px; border-width: 3px; }

/* ── Empty States ────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-faint);
  font-size: var(--text-md);
}
.empty-state-icon { font-size: 32px; margin-bottom: var(--space-2); opacity: .5; }
.empty-state-msg  { margin-bottom: var(--space-3); }

/* ── Progress Bar ────────────────────────────────── */
.progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.progress-bar .fill {
  height: 100%;
  border-radius: var(--radius-md);
  transition: width .4s ease;
}
.progress-bar-success .fill { background: var(--success-500); }
.progress-bar-primary .fill { background: var(--primary-600); }
.progress-bar-warning .fill { background: var(--warning-500); }

/* ═══════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════ */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.25s ease, toastOut 0.25s ease 3.75s forwards;
  max-width: 400px;
}
.toast-success { background: var(--success-100); border: 1px solid var(--success-200); color: var(--success-600); }
.toast-error   { background: var(--danger-100);  border: 1px solid var(--danger-200);  color: var(--danger-600); }
.toast-info    { background: var(--primary-100); border: 1px solid var(--primary-200); color: var(--primary-700); }
.toast-warning { background: var(--warning-100); border: 1px solid var(--warning-200); color: var(--warning-600); }
.toast .toast-close {
  margin-left: auto;
  cursor: pointer;
  opacity: 0.5;
  font-size: 14px;
  background: none;
  border: none;
  color: inherit;
  padding: 0 2px;
}
.toast .toast-close:hover { opacity: 1; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(12px); } }

/* ═══════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .scores { grid-template-columns: repeat(2, 1fr); }
  .scores-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .scores { grid-template-columns: repeat(2, 1fr); }
  .scores-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .scores { grid-template-columns: 1fr; }
  .scores-4 { grid-template-columns: 1fr; }
  .btn { padding: 11px 18px; min-height: 44px; }
}

/* ═══════════════════════════════════════════════════
   MOBILE UTILITIES
   ═══════════════════════════════════════════════════ */
.mobile-only  { display: none !important; }
.desktop-only { display: initial; }

@media (max-width: 768px) {
  .mobile-only  { display: initial !important; }
  .desktop-only { display: none !important; }
}

/* ── Responsive Table Wrapper ───────────────────── */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Touch-Friendly Inputs ──────────────────────── */
@media (max-width: 480px) {
  input, select, textarea {
    font-size: 16px;
    min-height: 44px;
  }
}

/* ── Mobile Stack Helper ────────────────────────── */
@media (max-width: 640px) {
  .mobile-stack {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* ═══════════════════════════════════════════════════
   MOBILE NAVIGATION (Hamburger Menu)
   ═══════════════════════════════════════════════════ */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
  font-size: 22px;
}

.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
}

.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  background: var(--bg-card);
  z-index: 9999;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}

.mobile-nav-drawer.open {
  transform: translateX(0);
}

.mobile-nav-drawer .nav-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  font-size: 18px;
  font-weight: var(--font-extrabold);
  color: var(--text-primary);
}

.mobile-nav-drawer .nav-link {
  display: block;
  padding: 14px 20px;
  font-size: 14px;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
}

.mobile-nav-drawer .nav-link:hover {
  background: var(--bg-hover);
}

.mobile-nav-drawer .nav-link.active {
  background: var(--primary-50);
  color: var(--primary-600);
  font-weight: var(--font-semibold);
}

.mobile-nav-drawer .nav-section {
  padding: 12px 20px 6px;
  font-size: 11px;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-faint);
}

.mobile-nav-drawer .nav-divider {
  border-top: 1px solid var(--border);
  margin: 8px 0;
}

@media (max-width: 768px) {
  .hamburger-btn {
    display: inline-flex;
    align-items: center;
  }
  .mobile-nav-overlay.open {
    display: block;
  }
  .mobile-nav-drawer {
    display: block;
  }
}

/* ═══════════════════════════════════════════════════
   UTILITY CLASSES
   Replaces common inline style="" patterns with
   reusable, token-based classes.
   ═══════════════════════════════════════════════════ */

/* ── Flex Layouts ──────────────────────────────────── */
.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.flex-center     { display: flex; align-items: center; }
.flex-between    { display: flex; align-items: center; justify-content: space-between; }
.flex-end        { display: flex; justify-content: flex-end; }
.items-start     { align-items: flex-start; }
.items-center    { align-items: center; }
.justify-center  { justify-content: center; }
.flex-1          { flex: 1; min-width: 0; }
.flex-2          { flex: 2; min-width: 0; }
.flex-shrink-0   { flex-shrink: 0; }

/* ── Gaps ──────────────────────────────────────────── */
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }

/* ── Margins ───────────────────────────────────────── */
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-5  { margin-bottom: var(--space-5); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }

/* ── Text ──────────────────────────────────────────── */
.text-xs     { font-size: var(--text-xs); }
.text-sm     { font-size: var(--text-sm); }
.text-base   { font-size: var(--text-base); }
.text-md     { font-size: var(--text-md); }
.text-lg     { font-size: var(--text-lg); }
.text-xl     { font-size: var(--text-xl); }
.text-muted  { color: var(--text-muted); }
.text-faint  { color: var(--text-faint); }
.text-primary{ color: var(--text-primary); }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.font-medium   { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold     { font-weight: var(--font-bold); }
.font-mono     { font-family: var(--font-mono); }
.uppercase     { text-transform: uppercase; letter-spacing: 0.5px; }
.truncate      { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Width / Display ───────────────────────────────── */
.w-full       { width: 100%; }
.hidden       { display: none; }
.block        { display: block; }
.inline-block { display: inline-block; }

/* ── Padding ───────────────────────────────────────── */
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }

/* ── Semantic Badge Aliases ────────────────────────── */
.badge-success { background: var(--success-100); color: var(--success-500); }
.badge-warning { background: var(--warning-100); color: var(--warning-500); }
.badge-danger  { background: var(--danger-100);  color: var(--danger-500); }
.badge-info    { background: var(--primary-100); color: var(--primary-600); }