/**
 * Bootstrap 5 Override with Hey Wav Design System
 * 
 * This file overrides all Bootstrap 5 CSS variables with Hey Wav design tokens.
 * Supports Bootstrap's native color modes: [data-bs-theme="light"] and [data-bs-theme="dark"]
 */

/* ================================
   HEY WAV COLOR PALETTE
   ================================ */

:root {
  /* Blue Palette */
  --hw-blue-50: #eff6ff;
  --hw-blue-50-rgb: 239, 246, 255;
  --hw-blue-100: #dbeafe;
  --hw-blue-100-rgb: 219, 234, 254;
  --hw-blue-200: #bfdbfe;
  --hw-blue-200-rgb: 191, 219, 254;
  --hw-blue-300: #93c5fd;
  --hw-blue-300-rgb: 147, 197, 253;
  --hw-blue-400: #60a5fa;
  --hw-blue-400-rgb: 96, 165, 250;
  --hw-blue-500: #3b82f6;
  --hw-blue-500-rgb: 59, 130, 246;
  --hw-blue-600: #2563eb;
  --hw-blue-600-rgb: 37, 99, 235;
  --hw-blue-700: #1d4ed8;
  --hw-blue-700-rgb: 29, 78, 216;
  --hw-blue-800: #1e40af;
  --hw-blue-800-rgb: 30, 64, 175;
  --hw-blue-900: #1e3a8a;
  --hw-blue-900-rgb: 30, 58, 138;
  --hw-blue-950: #172554;
  --hw-blue-950-rgb: 23, 37, 84;

  /* Gray Palette */
  --hw-gray-50: #f9fafb;
  --hw-gray-50-rgb: 249, 250, 251;
  --hw-gray-100: #f3f4f6;
  --hw-gray-100-rgb: 243, 244, 246;
  --hw-gray-200: #e5e7eb;
  --hw-gray-200-rgb: 229, 231, 235;
  --hw-gray-300: #d1d5db;
  --hw-gray-300-rgb: 209, 213, 219;
  --hw-gray-400: #9ca3af;
  --hw-gray-400-rgb: 156, 163, 175;
  --hw-gray-500: #6b7280;
  --hw-gray-500-rgb: 107, 114, 128;
  --hw-gray-600: #4b5563;
  --hw-gray-600-rgb: 75, 85, 99;
  --hw-gray-700: #374151;
  --hw-gray-700-rgb: 55, 65, 81;
  --hw-gray-800: #1f2937;
  --hw-gray-800-rgb: 31, 41, 55;
  --hw-gray-900: #111827;
  --hw-gray-900-rgb: 17, 24, 39;
  --hw-gray-950: #030712;
  --hw-gray-950-rgb: 3, 7, 18;

  /* Status Colors */
  --hw-green-50: #f0fdf4;
  --hw-green-50-rgb: 240, 253, 244;
  --hw-green-100: #dcfce7;
  --hw-green-100-rgb: 220, 252, 231;
  --hw-green-400: #4ade80;
  --hw-green-400-rgb: 74, 222, 128;
  --hw-green-500: #22c55e;
  --hw-green-500-rgb: 34, 197, 94;
  --hw-green-600: #16a34a;
  --hw-green-600-rgb: 22, 163, 74;
  --hw-green-700: #15803d;
  --hw-green-700-rgb: 21, 128, 61;
  --hw-green-900: #14532d;
  --hw-green-900-rgb: 20, 83, 45;
  --hw-green-950: #052e16;
  --hw-green-950-rgb: 5, 46, 22;

  --hw-red-50: #fef2f2;
  --hw-red-50-rgb: 254, 242, 242;
  --hw-red-100: #fee2e2;
  --hw-red-100-rgb: 254, 226, 226;
  --hw-red-400: #f87171;
  --hw-red-400-rgb: 248, 113, 113;
  --hw-red-500: #ef4444;
  --hw-red-500-rgb: 239, 68, 68;
  --hw-red-600: #dc2626;
  --hw-red-600-rgb: 220, 38, 38;
  --hw-red-700: #b91c1c;
  --hw-red-700-rgb: 185, 28, 28;
  --hw-red-900: #7f1d1d;
  --hw-red-900-rgb: 127, 29, 29;
  --hw-red-950: #450a0a;
  --hw-red-950-rgb: 69, 10, 10;

  --hw-orange-50: #fff7ed;
  --hw-orange-50-rgb: 255, 247, 237;
  --hw-orange-100: #ffedd5;
  --hw-orange-100-rgb: 255, 237, 213;
  --hw-orange-400: #fb923c;
  --hw-orange-400-rgb: 251, 146, 60;
  --hw-orange-500: #f97316;
  --hw-orange-500-rgb: 249, 115, 22;
  --hw-orange-600: #ea580c;
  --hw-orange-600-rgb: 234, 88, 12;
  --hw-orange-700: #c2410c;
  --hw-orange-700-rgb: 194, 65, 12;
  --hw-orange-900: #9a3412;
  --hw-orange-900-rgb: 154, 52, 18;
  --hw-orange-950: #431407;
  --hw-orange-950-rgb: 67, 20, 7;

  --hw-yellow-50: #fffbe6;
--hw-yellow-50-rgb: 255, 251, 230;
--hw-yellow-100: #fef5c2;
--hw-yellow-100-rgb: 254, 245, 194;
--hw-yellow-400: #fde047;
--hw-yellow-400-rgb: 253, 224, 71;
--hw-yellow-500: #fdd838;
--hw-yellow-500-rgb: 253, 216, 56;
--hw-yellow-600: #FDD000;
--hw-yellow-600-rgb: 253, 208, 0;
--hw-yellow-700: #dda200;
--hw-yellow-700-rgb: 221, 162, 0;
--hw-yellow-900: #936100;
--hw-yellow-900-rgb: 147, 97, 0;
--hw-yellow-950: #6e4400;
--hw-yellow-950-rgb: 110, 68, 0;

  /* Accent Colors */
  --hw-purple-50: #faf5ff;
  --hw-purple-50-rgb: 250, 245, 255;
  --hw-purple-100: #f3e8ff;
  --hw-purple-100-rgb: 243, 232, 255;
  --hw-purple-400: #c084fc;
  --hw-purple-400-rgb: 192, 132, 252;
  --hw-purple-500: #a855f7;
  --hw-purple-500-rgb: 168, 85, 247;
  --hw-purple-600: #9333ea;
  --hw-purple-600-rgb: 147, 51, 234;
  --hw-purple-700: #7c3aed;
  --hw-purple-700-rgb: 124, 58, 237;
  --hw-purple-900: #581c87;
  --hw-purple-900-rgb: 88, 28, 135;

  --hw-indigo-50: #eef2ff;
  --hw-indigo-50-rgb: 238, 242, 255;
  --hw-indigo-100: #e0e7ff;
  --hw-indigo-100-rgb: 224, 231, 255;
  --hw-indigo-200: #c7d2fe;
  --hw-indigo-200-rgb: 199, 210, 254;
  --hw-indigo-400: #818cf8;
  --hw-indigo-400-rgb: 129, 140, 248;
  --hw-indigo-500: #6366f1;
  --hw-indigo-500-rgb: 99, 102, 241;
  --hw-indigo-600: #4f46e5;
  --hw-indigo-600-rgb: 79, 70, 229;
  --hw-indigo-700: #4338ca;
  --hw-indigo-700-rgb: 67, 56, 202;
  --hw-indigo-800: #3730a3;
  --hw-indigo-800-rgb: 55, 48, 163;
  --hw-indigo-900: #312e81;
  --hw-indigo-900-rgb: 49, 46, 129;

  --hw-pink-50: #fdf2f8;
  --hw-pink-50-rgb: 253, 242, 248;
  --hw-pink-100: #fce7f3;
  --hw-pink-100-rgb: 252, 231, 243;
  --hw-pink-400: #f472b6;
  --hw-pink-400-rgb: 244, 114, 182;
  --hw-pink-500: #ec4899;
  --hw-pink-500-rgb: 236, 72, 153;
  --hw-pink-600: #db2777;
  --hw-pink-600-rgb: 219, 39, 119;
  --hw-pink-700: #be185d;
  --hw-pink-700-rgb: 190, 24, 93;
  --hw-pink-900: #831843;
  --hw-pink-900-rgb: 131, 24, 67;

  /* Violet Palette */
  --hw-violet-50: #f5f3ff;
  --hw-violet-50-rgb: 245, 243, 255;
  --hw-violet-100: #ede9fe;
  --hw-violet-100-rgb: 237, 233, 254;
  --hw-violet-200: #ddd6fe;
  --hw-violet-200-rgb: 221, 214, 254;
  --hw-violet-300: #c4b5fd;
  --hw-violet-300-rgb: 196, 181, 253;
  --hw-violet-400: #a78bfa;
  --hw-violet-400-rgb: 167, 139, 250;
  --hw-violet-500: #8b5cf6;
  --hw-violet-500-rgb: 139, 92, 246;
  --hw-violet-600: #7c3aed;
  --hw-violet-600-rgb: 124, 58, 237;
  --hw-violet-700: #6d28d9;
  --hw-violet-700-rgb: 109, 40, 217;
  --hw-violet-800: #5b21b6;
  --hw-violet-800-rgb: 91, 33, 182;
  --hw-violet-900: #4c1d95;
  --hw-violet-900-rgb: 76, 29, 149;
  --hw-violet-950: #2e1065;
  --hw-violet-950-rgb: 46, 16, 101;

  /* Emerald Palette */
  --hw-emerald-50: #ecfdf5;
  --hw-emerald-50-rgb: 236, 253, 245;
  --hw-emerald-100: #d1fae5;
  --hw-emerald-100-rgb: 209, 250, 229;
  --hw-emerald-200: #a7f3d0;
  --hw-emerald-200-rgb: 167, 243, 208;
  --hw-emerald-300: #6ee7b7;
  --hw-emerald-300-rgb: 110, 231, 183;
  --hw-emerald-400: #34d399;
  --hw-emerald-400-rgb: 52, 211, 153;
  --hw-emerald-500: #10b981;
  --hw-emerald-500-rgb: 16, 185, 129;
  --hw-emerald-600: #059669;
  --hw-emerald-600-rgb: 5, 150, 105;
  --hw-emerald-700: #047857;
  --hw-emerald-700-rgb: 4, 120, 87;
  --hw-emerald-800: #065f46;
  --hw-emerald-800-rgb: 6, 95, 70;
  --hw-emerald-900: #064e3b;
  --hw-emerald-900-rgb: 6, 78, 59;
  --hw-emerald-950: #022c22;
  --hw-emerald-950-rgb: 2, 44, 34;

  /* Rose Palette */
  --hw-rose-50: #fff1f2;
  --hw-rose-50-rgb: 255, 241, 242;
  --hw-rose-100: #ffe4e6;
  --hw-rose-100-rgb: 255, 228, 230;
  --hw-rose-200: #fecdd3;
  --hw-rose-200-rgb: 254, 205, 211;
  --hw-rose-300: #fda4af;
  --hw-rose-300-rgb: 253, 164, 175;
  --hw-rose-400: #fb7185;
  --hw-rose-400-rgb: 251, 113, 133;
  --hw-rose-500: #f43f5e;
  --hw-rose-500-rgb: 244, 63, 94;
  --hw-rose-600: #e11d48;
  --hw-rose-600-rgb: 225, 29, 72;
  --hw-rose-700: #be123c;
  --hw-rose-700-rgb: 190, 18, 60;
  --hw-rose-800: #9f1239;
  --hw-rose-800-rgb: 159, 18, 57;
  --hw-rose-900: #881337;
  --hw-rose-900-rgb: 136, 19, 55;
  --hw-rose-950: #4c0519;
  --hw-rose-950-rgb: 76, 5, 25;

  /* Expanded Teal Palette */
  --hw-teal-50: #f0fdfa;
  --hw-teal-50-rgb: 240, 253, 250;
  --hw-teal-100: #ccfbf1;
  --hw-teal-100-rgb: 204, 251, 241;
  --hw-teal-200: #99f6e4;
  --hw-teal-200-rgb: 153, 246, 228;
  --hw-teal-300: #5eead4;
  --hw-teal-300-rgb: 94, 234, 212;
  --hw-teal-400: #2dd4bf;
  --hw-teal-400-rgb: 45, 212, 191;
  --hw-teal-500: #14b8a6;
  --hw-teal-500-rgb: 20, 184, 166;
  --hw-teal-600: #0d9488;
  --hw-teal-600-rgb: 13, 148, 136;
  --hw-teal-700: #0f766e;
  --hw-teal-700-rgb: 15, 118, 110;
  --hw-teal-800: #115e59;
  --hw-teal-800-rgb: 17, 94, 89;
  --hw-teal-900: #134e4a;
  --hw-teal-900-rgb: 19, 78, 74;
  --hw-teal-950: #042f2e;
  --hw-teal-950-rgb: 4, 47, 46;

  /* Amber Palette */
  --hw-amber-50: #fffbeb;
  --hw-amber-50-rgb: 255, 251, 235;
  --hw-amber-100: #fef3c7;
  --hw-amber-100-rgb: 254, 243, 199;
  --hw-amber-200: #fde68a;
  --hw-amber-200-rgb: 253, 230, 138;
  --hw-amber-300: #fcd34d;
  --hw-amber-300-rgb: 252, 211, 77;
  --hw-amber-400: #fbbf24;
  --hw-amber-400-rgb: 251, 191, 36;
  --hw-amber-500: #f59e0b;
  --hw-amber-500-rgb: 245, 158, 11;
  --hw-amber-600: #d97706;
  --hw-amber-600-rgb: 217, 119, 6;
  --hw-amber-700: #b45309;
  --hw-amber-700-rgb: 180, 83, 9;
  --hw-amber-800: #92400e;
  --hw-amber-800-rgb: 146, 64, 14;
  --hw-amber-900: #78350f;
  --hw-amber-900-rgb: 120, 53, 15;
  --hw-amber-950: #451a03;
  --hw-amber-950-rgb: 69, 26, 3;

  /* Special Colors */
  --hw-white: #ffffff;
  --hw-white-rgb: 255, 255, 255;
  --hw-black: #000000;
  --hw-black-rgb: 0, 0, 0;
}

/* ================================
   BOOTSTRAP 5 LIGHT MODE OVERRIDES
   ================================ */

:root,
[data-bs-theme="light"] {
  /* Primary Color System */
  --bs-primary: var(--hw-blue-600);
  --bs-primary-rgb: 37, 99, 235;
  --bs-secondary: var(--hw-gray-600);
  --bs-secondary-rgb: 75, 85, 99;
  --bs-success: var(--hw-green-600);
  --bs-success-rgb: 22, 163, 74;
  --bs-info: var(--hw-blue-500);
  --bs-info-rgb: 59, 130, 246;
  --bs-warning: var(--hw-orange-500);
  --bs-warning-rgb: 249, 115, 22;
  --bs-danger: var(--hw-red-600);
  --bs-danger-rgb: 220, 38, 38;
  --bs-light: var(--hw-gray-100);
  --bs-light-rgb: 243, 244, 246;
  --bs-dark: var(--hw-gray-900);
  --bs-dark-rgb: 17, 24, 39;

  /* Text Colors */
  --bs-body-color: var(--hw-gray-800);
  --bs-body-color-rgb: 17, 24, 39;
  --bs-heading-color: var(--hw-gray-800);
  --bs-heading-color-rgb: 17, 24, 39;
  --bs-link-color: var(--hw-blue-600);
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color: var(--hw-blue-700);
  --bs-link-hover-color-rgb: 29, 78, 216;
  --bs-emphasis-color: var(--hw-gray-800);
  --bs-emphasis-color-rgb: 17, 24, 39;
  --bs-secondary-color: var(--hw-gray-700);
  --bs-secondary-color-rgb: 55, 65, 81;
  --bs-tertiary-color: var(--hw-gray-600);
  --bs-tertiary-color-rgb: 75, 85, 99;

  /* Background Colors */
  --bs-body-bg: var(--hw-gray-50);
  --bs-body-bg-rgb: var(--hw-gray-50-rgb);
  --bs-primary-bg-subtle: var(--hw-blue-50);
  --bs-secondary-bg-subtle: var(--hw-gray-50);
  --bs-success-bg-subtle: var(--hw-green-50);
  --bs-info-bg-subtle: var(--hw-blue-50);
  --bs-warning-bg-subtle: var(--hw-orange-50);
  --bs-danger-bg-subtle: var(--hw-red-50);
  --bs-light-bg-subtle: var(--hw-white);
  --bs-dark-bg-subtle: var(--hw-gray-200);

  /* Text Colors for Backgrounds */
  --bs-primary-text-emphasis: var(--hw-blue-700);
  --bs-secondary-text-emphasis: var(--hw-gray-700);
  --bs-success-text-emphasis: var(--hw-green-700);
  --bs-info-text-emphasis: var(--hw-blue-700);
  --bs-warning-text-emphasis: var(--hw-orange-700);
  --bs-danger-text-emphasis: var(--hw-red-700);
  --bs-light-text-emphasis: var(--hw-gray-700);
  --bs-dark-text-emphasis: var(--hw-gray-700);

  /* Border Colors */
  --bs-border-color: var(--hw-gray-200);
  --bs-border-lighter-color: var(--hw-gray-100);
  --bs-border-darker-color: var(--hw-gray-300);
  --bs-border-color-translucent: rgba(229, 231, 235, 0.175);
  --bs-primary-border-subtle: var(--hw-blue-200);
  --bs-secondary-border-subtle: var(--hw-gray-200);
  --bs-success-border-subtle: var(--hw-green-200);
  --bs-info-border-subtle: var(--hw-blue-200);
  --bs-warning-border-subtle: var(--hw-orange-200);
  --bs-danger-border-subtle: var(--hw-red-200);
  --bs-light-border-subtle: var(--hw-gray-200);
  --bs-dark-border-subtle: var(--hw-gray-300);

  /* Component Colors */
  --bs-component-active-color: var(--hw-white);
  --bs-component-active-bg: var(--hw-blue-600);
  --bs-focus-ring-color: rgba(37, 99, 235, 0.25);
  --bs-highlight-color: var(--hw-gray-900);
  --bs-highlight-bg: var(--hw-yellow-100);

  /* Special Colors */
  --hw-muted: var(--hw-gray-600);
  --hw-muted-rgb: var(--hw-gray-600-rgb);

  /* Typography System */
  --bs-font-sans-serif: 'Figtree', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-root-font-size: 16px;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;        /* 16px - Hey Wav base */
  --bs-body-font-weight: 400;       /* Hey Wav normal */
  --bs-body-line-height: 1.5;       /* Hey Wav normal */

  /* Hey Wav Font Size Scale */
  --bs-font-size-xs: 0.75rem;       /* 12px */
  --bs-font-size-sm: 0.875rem;      /* 14px */
  --bs-font-size-base: 1rem;        /* 16px */
  --bs-font-size-lg: 1.125rem;      /* 18px */
  --bs-font-size-xl: 1.25rem;       /* 20px */
  --bs-font-size-2xl: 1.5rem;       /* 24px */
  --bs-font-size-3xl: 1.875rem;     /* 30px */
  --bs-font-size-4xl: 2.25rem;      /* 36px */

  /* Hey Wav Font Weights */
  --bs-font-weight-lighter: lighter;
  --bs-font-weight-light: 300;
  --bs-font-weight-normal: 400;     /* Hey Wav normal */
  --bs-font-weight-medium: 500;     /* Hey Wav medium */
  --bs-font-weight-semibold: 600;   /* Hey Wav semibold */
  --bs-font-weight-bold: 700;       /* Hey Wav bold */
  --bs-font-weight-bolder: bolder;

  /* Hey Wav Line Heights */
  --bs-line-height-sm: 1.25;        /* Hey Wav tight */
  --bs-line-height-base: 1.5;       /* Hey Wav normal */
  --bs-line-height-lg: 1.625;       /* Hey Wav relaxed */

  /* Hey Wav Heading Styles */
  --bs-h1-font-size: var(--bs-font-size-2xl);  /* 24px */
  --bs-h2-font-size: var(--bs-font-size-xl);   /* 20px */
  --bs-h3-font-size: var(--bs-font-size-lg);   /* 18px */
  --bs-h4-font-size: var(--bs-font-size-base); /* 16px */
  --bs-h5-font-size: var(--bs-font-size-sm);   /* 14px */
  --bs-h6-font-size: var(--bs-font-size-xs);   /* 12px */

  /* Hey Wav Spacing System (based on 0.25rem = 4px) */
  --bs-spacer: 1rem;                 /* 16px - base spacer */
  
  /* Individual Spacing Variables */
  --bs-space-0: 0;
  --bs-space-1: 0.25rem;             /* 4px */
  --bs-space-2: 0.5rem;              /* 8px */
  --bs-space-3: 0.75rem;             /* 12px */
  --bs-space-4: 1rem;                /* 16px */
  --bs-space-5: 1.25rem;             /* 20px */
  --bs-space-6: 1.5rem;              /* 24px */
  --bs-space-8: 2rem;                /* 32px */
  --bs-space-10: 2.5rem;             /* 40px */
  --bs-space-12: 3rem;               /* 48px */
  --bs-space-16: 4rem;               /* 64px */
  --bs-space-20: 5rem;               /* 80px */
  --bs-space-24: 6rem;               /* 96px */

  /* Sizing Variables */
  --bs-icon-container-size-sm: 1.5rem;
  --bs-icon-container-size-md: 2rem;
  --bs-icon-container-size-lg: 2.5rem;
  --bs-icon-container-size-xl: 3rem;
  --bs-icon-container-size-2xl: 3.5rem;
  --bs-icon-container-size-3xl: 4rem;

  /* Width Variables */
  --bs-max-w-md: 28rem;
  --bs-max-w-lg: 32rem;
  --bs-max-w-2xl: 42rem;
  --bs-min-w-96: 24rem;

  /* Bootstrap Spacing Utilities Override */
  --bs-gutter-x: 1.5rem;             /* Hey Wav space-6 */
  --bs-gutter-y: 0;

  /* Hey Wav Border Radius System */
  --bs-border-radius-sm: 0.125rem;   /* 2px */
  --bs-border-radius: 0.25rem;       /* 4px - Hey Wav base */
  --bs-border-radius-md: 0.375rem;   /* 6px */
  --bs-border-radius-lg: 0.5rem;     /* 8px - Hey Wav lg */
  --bs-border-radius-xl: 0.75rem;    /* 12px - Hey Wav xl */
  --bs-border-radius-2xl: 1rem;      /* 16px - Hey Wav 2xl */
  --bs-border-radius-3xl: 1.5rem;    /* 24px - Hey Wav 3xl */
  --bs-border-radius-pill: 50rem;    /* Hey Wav full */

  /* Hey Wav Shadow System */
  --bs-box-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --bs-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --bs-box-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --bs-box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --bs-box-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --bs-box-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --bs-box-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --bs-box-shadow-none: 0 0 #0000;

  /* Hey Wav Border Widths */
  --bs-border-width: 1px;
  --bs-border-width-0: 0;
  --bs-border-width-2: 2px;
  --bs-border-width-3: 3px;
  --bs-border-width-4: 4px;
  --bs-border-width-5: 5px;

  /* Hey Wav Opacity Scale */
  --bs-opacity-0: 0;
  --bs-opacity-25: 0.25;
  --bs-opacity-50: 0.5;
  --bs-opacity-75: 0.75;
  --bs-opacity-100: 1;

  /* Hey Wav Z-Index Scale */
  --bs-zindex-dropdown: 1000;
  --bs-zindex-sticky: 1020;
  --bs-zindex-fixed: 1030;
  --bs-zindex-modal-backdrop: 1040;
  --bs-zindex-offcanvas-backdrop: 1045;
  --bs-zindex-modal: 1055;
  --bs-zindex-popover: 1070;
  --bs-zindex-tooltip: 1080;
  --bs-zindex-toast: 1090;

  /* Additional Hey Wav Spacing Utilities */
  --bs-spacer-1: var(--bs-space-1);                           /* 0.25rem */
  --bs-spacer-2: var(--bs-space-2);                           /* 0.5rem */
  --bs-spacer-3: var(--bs-space-3);                           /* 0.75rem */
  --bs-spacer-4: var(--bs-space-4);                           /* 1rem */
  --bs-spacer-5: var(--bs-space-5);                           /* 1.25rem */
  --bs-spacer-6: var(--bs-space-6);                           /* 1.5rem */

  /* Hey Wav Transition Variables */
  --bs-transition-duration-fast: 0.15s;
  --bs-transition-duration-normal: 0.3s;
  --bs-transition-duration-slow: 0.5s;
  --bs-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================
   BOOTSTRAP 5 DARK MODE OVERRIDES
   ================================ */

[data-bs-theme="dark"] {
  /* Primary Color System */
  --bs-primary: var(--hw-blue-500);
  --bs-primary-rgb: 59, 130, 246;
  --bs-secondary: var(--hw-gray-500);
  --bs-secondary-rgb: 107, 114, 128;
  --bs-success: var(--hw-green-500);
  --bs-success-rgb: 34, 197, 94;
  --bs-info: var(--hw-blue-400);
  --bs-info-rgb: 96, 165, 250;
  --bs-warning: var(--hw-orange-500);
  --bs-warning-rgb: 249, 115, 22;
  --bs-danger: var(--hw-red-500);
  --bs-danger-rgb: 239, 68, 68;
  --bs-light: var(--hw-gray-700);
  --bs-light-rgb: 55, 65, 81;
  --bs-dark: var(--hw-gray-100);
  --bs-dark-rgb: 243, 244, 246;

  /* Text Colors */
  --bs-body-color: var(--hw-gray-200);
  --bs-body-color-rgb: 243, 244, 246;
  --bs-heading-color: var(--hw-gray-200);
  --bs-heading-color-rgb: 255, 255, 255;
  --bs-link-color: var(--hw-blue-400);
  --bs-link-color-rgb: 96, 165, 250;
  --bs-link-hover-color: var(--hw-blue-500);
  --bs-link-hover-color-rgb: 59, 130, 246;
  --bs-emphasis-color: var(--hw-gray-200);
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: var(--hw-gray-200);
  --bs-secondary-color-rgb: 229, 231, 235;
  --bs-tertiary-color: var(--hw-gray-200);
  --bs-tertiary-color-rgb: 209, 213, 219;

  /* Background Colors */
  --bs-body-bg: var(--hw-gray-900);
  --bs-body-bg-rgb: 17, 24, 39;
  --bs-primary-bg-subtle: var(--hw-blue-950);
  --bs-secondary-bg-subtle: var(--hw-gray-800);
  --bs-success-bg-subtle: var(--hw-green-950);
  --bs-info-bg-subtle: var(--hw-blue-950);
  --bs-warning-bg-subtle: var(--hw-orange-950);
  --bs-danger-bg-subtle: var(--hw-red-950);
  --bs-light-bg-subtle: var(--hw-gray-800);
  --bs-dark-bg-subtle: var(--hw-gray-700);

  /* Text Colors for Backgrounds */
  --bs-primary-text-emphasis: var(--hw-blue-400);
  --bs-secondary-text-emphasis: var(--hw-gray-400);
  --bs-success-text-emphasis: var(--hw-green-400);
  --bs-info-text-emphasis: var(--hw-blue-400);
  --bs-warning-text-emphasis: var(--hw-orange-400);
  --bs-danger-text-emphasis: var(--hw-red-400);
  --bs-light-text-emphasis: var(--hw-gray-400);
  --bs-dark-text-emphasis: var(--hw-gray-300);

  /* Border Colors */
  --bs-border-color: var(--hw-gray-700);
  --bs-border-lighter-color: var(--hw-gray-700);
  --bs-border-darker-color: var(--hw-gray-600);
  --bs-border-color-translucent: rgba(55, 65, 81, 0.175);
  --bs-primary-border-subtle: var(--hw-blue-800);
  --bs-secondary-border-subtle: var(--hw-gray-700);
  --bs-success-border-subtle: var(--hw-green-800);
  --bs-info-border-subtle: var(--hw-blue-800);
  --bs-warning-border-subtle: var(--hw-orange-800);
  --bs-danger-border-subtle: var(--hw-red-800);
  --bs-light-border-subtle: var(--hw-gray-700);
  --bs-dark-border-subtle: var(--hw-gray-600);

  /* Component Colors */
  --bs-component-active-color: var(--hw-white);
  --bs-component-active-bg: var(--hw-blue-500);
  --bs-focus-ring-color: rgba(96, 165, 250, 0.25);
  --bs-highlight-color: var(--hw-gray-100);
  --bs-highlight-bg: var(--hw-yellow-950);

  /* Special Colors */
  --hw-muted: var(--hw-gray-400);
  --hw-muted-rgb: var(--hw-gray-400-rgb);
}

/* ================================
   COMPONENT-SPECIFIC OVERRIDES
   ================================ */

/* Navbar */
.navbar {
  --bs-navbar-color: var(--hw-gray-600);
  --bs-navbar-hover-color: var(--hw-gray-900);
  --bs-navbar-disabled-color: var(--hw-gray-400);
  --bs-navbar-active-color: var(--hw-blue-600);
  --bs-navbar-brand-margin-end: 1.5rem;
  --bs-navbar-brand-color: var(--hw-gray-900);
  --bs-navbar-brand-hover-color: var(--hw-blue-600);
  --bs-navbar-nav-link-padding-x: var(--bs-space-4);          /* 1rem */
  --bs-navbar-toggler-padding-y: var(--bs-space-1);           /* 0.25rem */
  --bs-navbar-toggler-padding-x: var(--bs-space-3);           /* 0.75rem */
  --bs-navbar-toggler-font-size: var(--bs-font-size-base);    /* 1rem */
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2875, 85, 99, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: var(--hw-gray-200);
  --bs-navbar-toggler-border-radius: var(--bs-border-radius);
  --bs-navbar-toggler-focus-width: 0.25rem;
  --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
}

[data-bs-theme="dark"] .navbar {
  --bs-navbar-color: var(--hw-gray-400);
  --bs-navbar-hover-color: var(--hw-gray-100);
  --bs-navbar-disabled-color: var(--hw-gray-600);
  --bs-navbar-active-color: var(--hw-blue-400);
  --bs-navbar-brand-color: var(--hw-gray-100);
  --bs-navbar-brand-hover-color: var(--hw-blue-400);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28107, 114, 128, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: var(--hw-gray-700);
}

/* Buttons */
.btn {
  --bs-btn-padding-x: var(--bs-space-4);                      /* 1rem */
  --bs-btn-padding-y: var(--bs-space-2);                      /* 0.5rem */
  --bs-btn-font-family: var(--bs-body-font-family);
  --bs-btn-font-size: var(--bs-body-font-size);               /* 1rem */
  --bs-btn-font-weight: 600;         /* 500 */
  --bs-btn-line-height: var(--bs-body-line-height);
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: var(--bs-border-width);              /* 1px */
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius-lg);         /* 0.5rem */
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: var(--bs-box-shadow-none);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
}

/* NUCLEAR OPTION: Force all four borders on ALL buttons */
.btn,
button.btn {
  border-top-style: solid !important;
  border-right-style: solid !important;
  border-bottom-style: solid !important;
  border-left-style: solid !important;
  border-top-width: var(--bs-btn-border-width, 1px) !important;
  border-right-width: var(--bs-btn-border-width, 1px) !important;
  border-bottom-width: var(--bs-btn-border-width, 1px) !important;
  border-left-width: var(--bs-btn-border-width, 1px) !important;
  border-top-color: var(--bs-btn-border-color, transparent) !important;
  border-right-color: var(--bs-btn-border-color, transparent) !important;
  border-bottom-color: var(--bs-btn-border-color, transparent) !important;
  border-left-color: var(--bs-btn-border-color, transparent) !important;
}

.btn:hover,
button.btn:hover {
  border-top-color: var(--bs-btn-hover-border-color, var(--bs-btn-border-color, transparent)) !important;
  border-right-color: var(--bs-btn-hover-border-color, var(--bs-btn-border-color, transparent)) !important;
  border-bottom-color: var(--bs-btn-hover-border-color, var(--bs-btn-border-color, transparent)) !important;
  border-left-color: var(--bs-btn-hover-border-color, var(--bs-btn-border-color, transparent)) !important;
}

.btn:active,
.btn.active,
button.btn:active,
button.btn.active {
  border-top-color: var(--bs-btn-active-border-color, var(--bs-btn-border-color, transparent)) !important;
  border-right-color: var(--bs-btn-active-border-color, var(--bs-btn-border-color, transparent)) !important;
  border-bottom-color: var(--bs-btn-active-border-color, var(--bs-btn-border-color, transparent)) !important;
  border-left-color: var(--bs-btn-active-border-color, var(--bs-btn-border-color, transparent)) !important;
}

/* Transparent loading button - keep borders transparent on hover */
.btn-loading-transparent,
.btn-loading-transparent:hover,
.btn-loading-transparent:active,
.btn-loading-transparent:focus {
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
}

/* Disabled and loading buttons should never show state changes */
.btn:disabled,
.btn.disabled,
.btn-disabled,
.btn-loading,
button.btn:disabled,
button.btn.disabled,
button.btn-disabled,
button.btn-loading,
.btn[disabled],
button.btn[disabled] {
  pointer-events: none !important;
  opacity: 0.65;
  cursor: not-allowed !important;
}

.btn:disabled:hover,
.btn:disabled:active,
.btn:disabled:focus,
.btn.disabled:hover,
.btn.disabled:active,
.btn.disabled:focus,
.btn-disabled:hover,
.btn-disabled:active,
.btn-disabled:focus,
.btn-loading:hover,
.btn-loading:active,
.btn-loading:focus,
button.btn:disabled:hover,
button.btn:disabled:active,
button.btn:disabled:focus,
button.btn.disabled:hover,
button.btn.disabled:active,
button.btn.disabled:focus,
button.btn-disabled:hover,
button.btn-disabled:active,
button.btn-disabled:focus,
button.btn-loading:hover,
button.btn-loading:active,
button.btn-loading:focus {
  background-color: var(--bs-btn-bg) !important;
  border-color: var(--bs-btn-border-color) !important;
  color: var(--bs-btn-color) !important;
  opacity: 0.65 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

.btn-sm{
  --bs-btn-padding-x: var(--bs-space-3);                   /* 0.75rem */
  --bs-btn-padding-y: var(--bs-space-2);                   /* 0.25rem */
  --bs-btn-font-size: var(--bs-font-size-sm);              /* 0.875rem */
  --bs-btn-border-radius: var(--bs-border-radius-lg);         /* 0.25rem */
}

.btn-lg{
  --bs-btn-padding-x: var(--bs-space-5);                   /* 1.25rem */
  --bs-btn-padding-y: var(--bs-space-3);                   /* 0.75rem */
  --bs-btn-font-size: var(--bs-font-size-lg);              /* 1.125rem */
  --bs-btn-border-radius: var(--bs-border-radius-lg);      /* 0.5rem */
}

/* Disabled cursor fix */
button:disabled,
.btn:disabled,
.btn.disabled {
  cursor: not-allowed !important;
  pointer-events: auto !important;
}

input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed !important;
}

/* Form Controls */
.form-control {
  background-color: transparent;
  --bs-form-control-bg: transparent;
  --bs-form-control-disabled-bg: var(--hw-gray-100);
  --bs-form-control-color: var(--hw-gray-900);
  --bs-form-control-border-color: var(--hw-gray-200);
  border-color: var(--hw-gray-200);
  --bs-form-control-border-width: 2px;
  border-width: var(--bs-form-control-border-width);
  --bs-form-control-border-radius: var(--bs-border-radius-xl);   /* 0.25rem */
  border-radius: var(--bs-border-radius-xl);
  --bs-form-control-box-shadow: var(--bs-box-shadow-inner);
  --bs-form-control-focus-border-color: var(--hw-blue-500);
  --bs-form-control-focus-box-shadow: none;
  --bs-form-control-placeholder-color: var(--hw-gray-400);
  --bs-form-control-plaintext-color: var(--bs-body-color);
  padding: .5rem .75rem;
  transition: .35s background-color ease-in-out;

  /* Form Size Variants */
  --bs-form-control-sm-font-size: var(--bs-font-size-sm);     /* 0.875rem */
  --bs-form-control-sm-border-radius: var(--bs-border-radius-sm); /* 0.125rem */

  --bs-form-control-lg-font-size: var(--bs-font-size-lg);     /* 1.125rem */
  --bs-form-control-lg-border-radius: var(--bs-border-radius-lg); /* 0.5rem */

  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control--inline{
  --bs-form-control-border-color: transparent;
  border-color: transparent;
}

.form-control--inline:hover{
  background-color: var(--hw-gray-50);
  --bs-form-control-bg: var(--hw-gray-50);
}

.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus{
  box-shadow: none;
}

.form-control:focus{
  border-color: var(--hw-blue-500) !important;
  box-shadow: none;
  background-color: var(--hw-white);
}

.form-control::placeholder{
  color: var(--hw-gray-400);
}

.input-group-text{
  border-radius: var(--bs-border-radius-xl);
  border-color: var(--hw-gray-50) !important;
  border-width: 0;
}

[data-bs-theme="dark"] .form-control {
  --bs-form-control-bg: transparent;
  background-color: transparent;
  --bs-form-control-disabled-bg: var(--hw-gray-700);
  --bs-form-control-color: var(--hw-gray-100);
  --bs-form-control-border-color: var(--hw-gray-700) !important;
  border-color: var(--hw-gray-700) !important;
  --bs-form-control-focus-border-color: var(--hw-blue-500) !important;
  --bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25);
  --bs-form-control-placeholder-color: var(--hw-gray-400);
}

[data-bs-theme="dark"] .form-control--inline{
  --bs-form-control-bg: transparent !important;
  background-color: transparent !important;
  --bs-form-control-border-color: transparent !important;
  border-color: transparent !important;
}

[data-bs-theme="dark"] .form-control--inline:hover {
  --bs-form-control-bg: rgba(var(--hw-gray-900-rgb), .5) !important;
  background-color: var(--bs-form-control-bg) !important;
}

[data-bs-theme="dark"] .form-control:focus{
  background-color: rgba(var(--hw-gray-800-rgb), .5);
  border-color: var(--hw-blue-500) !important;
}

/* Form Validation */
.form-control.is-valid {
  --bs-form-valid-color: var(--hw-green-700);
  --bs-form-valid-border-color: var(--hw-green-600);
}

.form-control.is-invalid {
  --bs-form-invalid-color: var(--hw-red-700);
  --bs-form-invalid-border-color: var(--hw-red-600);
}

[data-bs-theme="dark"] .form-control.is-valid {
  --bs-form-valid-color: var(--hw-green-400);
  --bs-form-valid-border-color: var(--hw-green-500);
}

[data-bs-theme="dark"] .form-control.is-invalid {
  --bs-form-invalid-color: var(--hw-red-400);
  --bs-form-invalid-border-color: var(--hw-red-500);
}

/* Form Select */
.form-select {
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Form Labels & Text */
.form-label {
  margin-bottom: var(--bs-space-2);           /* 0.5rem */
  font-size: var(--bs-font-size-sm);          /* 0.875rem */
  font-weight: var(--bs-font-weight-medium) !important;  /* 500 */
  color: var(--hw-gray-700);
}

[data-bs-theme="dark"] .form-label {
  color: var(--hw-gray-300);
}

.form-text {
  --bs-form-text-margin-top: var(--bs-space-1);               /* 0.25rem */
  --bs-form-text-font-size: var(--bs-font-size-xs);           /* 0.75rem */
  --bs-form-text-color: var(--bs-secondary-color);
}

/* Tables */
.table {
  --bs-table-color: var(--hw-gray-600);
  --bs-table-bg: var(--hw-white);
  --bs-table-border-color: var(--hw-gray-200);
  --bs-table-accent-bg: var(--hw-gray-50);
  --bs-table-striped-color: var(--hw-gray-900);
  --bs-table-striped-bg: var(--hw-gray-50);
  --bs-table-active-color: var(--hw-gray-900);
  --bs-table-active-bg: rgba(37, 99, 235, 0.1);
  --bs-table-hover-color: var(--hw-gray-900);
  --bs-table-hover-bg: var(--hw-gray-50);
  
  /* Table Cell Padding */
  --bs-table-cell-padding-y: var(--bs-space-3);               /* 0.75rem */
  --bs-table-cell-padding-x: var(--bs-space-3);               /* 0.75rem */
  --bs-table-cell-padding-y-sm: var(--bs-space-1);            /* 0.25rem */
  --bs-table-cell-padding-x-sm: var(--bs-space-1);            /* 0.25rem */
}

.table>:not(caption)>*>*{
  box-shadow: none;
}

.table>thead th{
  background-color: var(--hw-gray-50);
}

.table.table-hover > tbody > tr:hover > td,
.table.table-hover > tbody > tr:hover > th {
  background-color: var(--bs-table-hover-bg) !important;
  color: var(--bs-table-hover-color) !important;
}

[data-bs-theme="dark"] .table.table-hover > tbody > tr:hover > td,
[data-bs-theme="dark"] .table.table-hover > tbody > tr:hover > th {
  background-color: var(--bs-table-hover-bg) !important;
  color: var(--bs-table-hover-color) !important;
}

[data-bs-theme="dark"] .table {
  --bs-table-color: var(--hw-gray-400);
  --bs-table-bg: var(--hw-green-800);
  --bs-table-border-color: var(--hw-gray-700);
  --bs-table-accent-bg: var(--hw-gray-800);
  --bs-table-striped-color: var(--hw-gray-100);
  --bs-table-striped-bg: var(--hw-gray-800);
  --bs-table-active-color: var(--hw-gray-100);
  --bs-table-active-bg: rgba(96, 165, 250, 0.1);
  --bs-table-hover-color: var(--hw-gray-100);
  --bs-table-hover-bg: var(--hw-gray-800);
}

[data-bs-theme="dark"] .table>thead th{
  background-color: rgba(var(--hw-gray-700-rgb), .5) !important;
}

/* Dropdown */
.dropdown-menu {
  --bs-dropdown-min-width: 10rem;
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: var(--bs-space-2);                 /* 0.5rem */
  --bs-dropdown-spacer: 0.125rem;
  --bs-dropdown-font-size: var(--bs-body-font-size);          /* 1rem */
  --bs-dropdown-color: var(--hw-gray-900);
  --bs-dropdown-bg: var(--hw-white);
  --bs-dropdown-border-color: var(--hw-gray-200);
  --bs-dropdown-border-radius: var(--bs-border-radius-xl);    /* 0.5rem */
  --bs-dropdown-border-width: var(--bs-border-width);         /* 1px */
  --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
  --bs-dropdown-divider-bg: var(--hw-gray-200);
  --bs-dropdown-divider-margin-y: var(--bs-space-2);          /* 0.5rem */
  --bs-dropdown-box-shadow: var(--bs-box-shadow-lg);
  --bs-dropdown-link-color: var(--hw-gray-900);
  --bs-dropdown-link-hover-color: var(--hw-gray-900);
  --bs-dropdown-link-hover-bg: var(--hw-gray-50);
  --bs-dropdown-link-active-color: var(--hw-white);
  --bs-dropdown-link-active-bg: var(--hw-blue-600);
  --bs-dropdown-link-disabled-color: var(--hw-gray-400);
  --bs-dropdown-item-padding-x: var(--bs-space-4);            /* 1rem */
  --bs-dropdown-item-padding-y: var(--bs-space-2);            /* 0.5rem */
  --bs-dropdown-header-color: var(--hw-gray-600);
  --bs-dropdown-header-padding-x: var(--bs-space-4);          /* 1rem */
  --bs-dropdown-header-padding-y: var(--bs-space-2);          /* 0.5rem */
}

.dropdown-divider{
  --bs-dropdown-divider-bg: var(--hw-gray-200);
  --bs-dropdown-divider-margin-y: var(--bs-space-2);
}

.dropdown-menu-visual{
  background-color: var(--hw-white);
  border: 1px solid var(--hw-gray-200);
  border-radius: var(--bs-border-radius-xl);
  box-shadow: var(--bs-box-shadow-lg);
}

[data-bs-theme="dark"] .dropdown-menu {
  --bs-dropdown-color: var(--hw-gray-100);
  --bs-dropdown-bg: var(--hw-gray-800);
  --bs-dropdown-border-color: var(--hw-gray-700);
  --bs-dropdown-divider-bg: var(--hw-gray-700);
  --bs-dropdown-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --bs-dropdown-link-color: var(--hw-gray-100);
  --bs-dropdown-link-hover-color: var(--hw-gray-100);
  --bs-dropdown-link-hover-bg: var(--hw-gray-700);
  --bs-dropdown-link-active-color: var(--hw-white);
  --bs-dropdown-link-active-bg: var(--hw-blue-500);
  --bs-dropdown-link-disabled-color: var(--hw-gray-600);
  --bs-dropdown-header-color: var(--hw-gray-400);
}

[data-bs-theme="dark"] .dropdown-divider{
  --bs-dropdown-divider-bg: var(--hw-gray-700);
}

[data-bs-theme="dark"] .dropdown-menu-visual{
  background-color: var(--hw-gray-800);
  border-color: var(--hw-gray-700);
}

/* Pagination */
.pagination {
  --bs-pagination-padding-x: var(--bs-space-3);               /* 0.75rem */
  --bs-pagination-padding-y: var(--bs-space-2);               /* 0.5rem */
  --bs-pagination-padding-x-sm: var(--bs-space-2);            /* 0.5rem */
  --bs-pagination-padding-y-sm: var(--bs-space-1);            /* 0.375rem */
  --bs-pagination-padding-x-lg: var(--bs-space-4);            /* 1rem */
  --bs-pagination-padding-y-lg: var(--bs-space-3);            /* 0.75rem */
  --bs-pagination-font-size: var(--bs-body-font-size);        /* 1rem */
  --bs-pagination-color: var(--hw-blue-600);
  --bs-pagination-bg: var(--hw-white);
  --bs-pagination-border-width: var(--bs-border-width);       /* 1px */
  --bs-pagination-border-color: var(--hw-gray-200);
  --bs-pagination-border-radius: var(--bs-border-radius);     /* 0.25rem */
  --bs-pagination-hover-color: var(--hw-blue-700);
  --bs-pagination-hover-bg: var(--hw-gray-50);
  --bs-pagination-hover-border-color: var(--hw-gray-300);
  --bs-pagination-focus-color: var(--hw-blue-700);
  --bs-pagination-focus-bg: var(--hw-gray-50);
  --bs-pagination-focus-box-shadow: var(--bs-focus-ring-color);
  --bs-pagination-active-color: var(--hw-white);
  --bs-pagination-active-bg: var(--hw-blue-600);
  --bs-pagination-active-border-color: var(--hw-blue-600);
  --bs-pagination-disabled-color: var(--hw-gray-400);
  --bs-pagination-disabled-bg: var(--hw-white);
  --bs-pagination-disabled-border-color: var(--hw-gray-200);
}

[data-bs-theme="dark"] .pagination {
  --bs-pagination-color: var(--hw-blue-400);
  --bs-pagination-bg: var(--hw-gray-800);
  --bs-pagination-border-color: var(--hw-gray-700);
  --bs-pagination-hover-color: var(--hw-blue-500);
  --bs-pagination-hover-bg: var(--hw-gray-700);
  --bs-pagination-hover-border-color: var(--hw-gray-600);
  --bs-pagination-focus-color: var(--hw-blue-500);
  --bs-pagination-focus-bg: var(--hw-gray-700);
  --bs-pagination-active-color: var(--hw-white);
  --bs-pagination-active-bg: var(--hw-blue-500);
  --bs-pagination-active-border-color: var(--hw-blue-500);
  --bs-pagination-disabled-color: var(--hw-gray-600);
  --bs-pagination-disabled-bg: var(--hw-gray-800);
  --bs-pagination-disabled-border-color: var(--hw-gray-700);
}

/* Alerts */
.alert {
  --bs-alert-padding-x: var(--bs-space-4);                    /* 1rem */
  --bs-alert-padding-y: var(--bs-space-3);                    /* 0.75rem */
  --bs-alert-margin-bottom: var(--bs-space-4);                /* 1rem */
  --bs-alert-color: inherit;
  --bs-alert-bg: transparent;
  --bs-alert-border: var(--bs-border-width) solid transparent; /* 1px solid transparent */
  --bs-alert-border-radius: var(--bs-border-radius-lg);       /* 0.5rem */
  --bs-alert-link-color: inherit;
}

/* Progress */
.progress {
  --bs-progress-height: var(--bs-space-4);                    /* 1rem */
  --bs-progress-font-size: var(--bs-font-size-xs);            /* 0.75rem */
  --bs-progress-bg: var(--hw-gray-200);
  --bs-progress-border-radius: var(--bs-border-radius);       /* 0.25rem */
  --bs-progress-box-shadow: var(--bs-box-shadow-inner);
  --bs-progress-bar-color: var(--hw-white);
  --bs-progress-bar-bg: var(--hw-blue-600);
  --bs-progress-bar-transition: width 0.6s ease;
}

[data-bs-theme="dark"] .progress {
  --bs-progress-bg: var(--hw-gray-700);
  --bs-progress-bar-color: var(--hw-white);
  --bs-progress-bar-bg: var(--hw-blue-500);
}

/* List Group */
.list-group {
  --bs-list-group-color: var(--hw-gray-900);
  --bs-list-group-bg: var(--hw-white);
  --bs-list-group-border-color: var(--hw-gray-200);
  --bs-list-group-border-width: var(--bs-border-width);       /* 1px */
  --bs-list-group-border-radius: var(--bs-border-radius-lg);  /* 0.5rem */
  --bs-list-group-item-padding-x: var(--bs-space-4);          /* 1rem */
  --bs-list-group-item-padding-y: var(--bs-space-3);          /* 0.75rem */
  --bs-list-group-action-color: var(--hw-gray-700);
  --bs-list-group-action-hover-color: var(--hw-gray-900);
  --bs-list-group-action-hover-bg: var(--hw-gray-50);
  --bs-list-group-action-active-color: var(--hw-gray-900);
  --bs-list-group-action-active-bg: var(--hw-gray-100);
  --bs-list-group-disabled-color: var(--hw-gray-400);
  --bs-list-group-disabled-bg: var(--hw-white);
  --bs-list-group-active-color: var(--hw-white);
  --bs-list-group-active-bg: var(--hw-blue-600);
  --bs-list-group-active-border-color: var(--hw-blue-600);
}

[data-bs-theme="dark"] .list-group {
  --bs-list-group-color: var(--hw-gray-100);
  --bs-list-group-bg: var(--hw-gray-800);
  --bs-list-group-border-color: var(--hw-gray-700);
  --bs-list-group-action-color: var(--hw-gray-300);
  --bs-list-group-action-hover-color: var(--hw-gray-100);
  --bs-list-group-action-hover-bg: var(--hw-gray-700);
  --bs-list-group-action-active-color: var(--hw-gray-100);
  --bs-list-group-action-active-bg: var(--hw-gray-700);
  --bs-list-group-disabled-color: var(--hw-gray-600);
  --bs-list-group-disabled-bg: var(--hw-gray-800);
  --bs-list-group-active-color: var(--hw-white);
  --bs-list-group-active-bg: var(--hw-blue-500);
  --bs-list-group-active-border-color: var(--hw-blue-500);
}

/* Breadcrumb */
.breadcrumb {
  --bs-breadcrumb-padding-x: 0;
  --bs-breadcrumb-padding-y: 0;
  --bs-breadcrumb-margin-bottom: var(--bs-space-4);           /* 1rem */
  --bs-breadcrumb-bg: transparent;
  --bs-breadcrumb-border-radius: 0;
  --bs-breadcrumb-divider-color: var(--hw-gray-400);
  --bs-breadcrumb-item-active-color: var(--hw-gray-600);
}

[data-bs-theme="dark"] .breadcrumb {
  --bs-breadcrumb-divider-color: var(--hw-gray-600);
  --bs-breadcrumb-item-active-color: var(--hw-gray-400);
}

/* Close Button */
.btn-close {
  --bs-btn-close-color: var(--hw-gray-900);
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23111827'%3e%3cpath d='m.293.293.707.707L8 7.293 15.293 0a1 1 0 1 1 1.414 1.414L9.414 8.707l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-7.293 7.293A1 1 0 0 1-.707 15.293L6.586 8.707-.707 1.414A1 1 0 0 1 .293.293z'/%3e%3c/svg%3e");
  --bs-btn-close-opacity: 0.5;
  --bs-btn-close-hover-opacity: 0.75;
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-disabled-opacity: 0.25;
  --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme="dark"] .btn-close {
  --bs-btn-close-color: var(--hw-gray-100);
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f3f4f6'%3e%3cpath d='m.293.293.707.707L8 7.293 15.293 0a1 1 0 1 1 1.414 1.414L9.414 8.707l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-7.293 7.293A1 1 0 0 1-.707 15.293L6.586 8.707-.707 1.414A1 1 0 0 1 .293.293z'/%3e%3c/svg%3e");
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25);
}

/* Modal */
.modal {
  --bs-modal-zindex: var(--bs-zindex-modal);                  /* 1055 */
  --bs-modal-width: 500px;
  --bs-modal-padding: var(--bs-space-4);                      /* 1rem */
  --bs-modal-margin: var(--bs-space-2);                       /* 0.5rem */
  --bs-modal-color: var(--hw-gray-900);
  --bs-modal-bg: var(--hw-white);
  --bs-modal-bg-rgb: var(--hw-white-rgb);
  --bs-modal-border-color: var(--hw-gray-200);
  --bs-modal-border-width: var(--bs-border-width);            /* 1px */
  --bs-modal-border-radius: var(--bs-border-radius-xl);       /* 0.75rem */
  --bs-modal-box-shadow: var(--bs-box-shadow-lg);
  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-xl) - var(--bs-border-width));
  --bs-modal-header-padding-x: var(--bs-space-6);             /* 1.5rem */
  --bs-modal-header-padding-y: var(--bs-space-4);             /* 1rem */
  --bs-modal-header-padding: var(--bs-modal-header-padding-y) var(--bs-modal-header-padding-x);
  --bs-modal-header-border-color: var(--hw-gray-200);
  --bs-modal-header-border-width: var(--bs-border-width);     /* 1px */
  --bs-modal-title-line-height: var(--bs-line-height-base);   /* 1.5 */
  --bs-modal-footer-gap: var(--bs-space-2);                   /* 0.5rem */
  --bs-modal-footer-bg: transparent;
  --bs-modal-footer-border-color: var(--hw-gray-200);
  --bs-modal-footer-border-width: var(--bs-border-width);     /* 1px */
}

[data-bs-theme="dark"] .modal {
  --bs-modal-color: var(--hw-gray-100);
  --bs-modal-bg: var(--hw-gray-800);
  --bs-modal-bg-rgb: var(--hw-gray-800-rgb);
  --bs-modal-border-color: var(--hw-gray-700);
  --bs-modal-header-border-color: var(--hw-gray-700);
  --bs-modal-footer-border-color: var(--hw-gray-700);
}

/* Tooltip */
.tooltip {
  --bs-tooltip-zindex: var(--bs-zindex-tooltip);              /* 1080 */
  --bs-tooltip-max-width: 200px;
  --bs-tooltip-padding-x: var(--bs-space-2);                  /* 0.5rem */
  --bs-tooltip-padding-y: var(--bs-space-1);                  /* 0.25rem */
  --bs-tooltip-margin: 0;
  --bs-tooltip-font-size: var(--bs-font-size-sm);             /* 0.875rem */
  --bs-tooltip-color: var(--hw-white);
  --bs-tooltip-bg: var(--hw-gray-900);
  --bs-tooltip-border-radius: var(--bs-border-radius);        /* 0.25rem */
  --bs-tooltip-opacity: 0.9;
  --bs-tooltip-arrow-width: 0.8rem;
  --bs-tooltip-arrow-height: 0.4rem;
}

[data-bs-theme="dark"] .tooltip {
  --bs-tooltip-color: var(--hw-gray-100);
  --bs-tooltip-bg: var(--hw-gray-800);
}

/* Popover */
.popover {
  --bs-popover-zindex: var(--bs-zindex-popover);              /* 1070 */
  --bs-popover-max-width: 276px;
  --bs-popover-font-size: var(--bs-font-size-sm);             /* 0.875rem */
  --bs-popover-bg: var(--hw-white);
  --bs-popover-border-width: var(--bs-border-width);          /* 1px */
  --bs-popover-border-color: var(--hw-gray-200);
  --bs-popover-border-radius: var(--bs-border-radius-lg);     /* 0.5rem */
  --bs-popover-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
  --bs-popover-box-shadow: var(--bs-box-shadow-lg);
  --bs-popover-header-padding-x: var(--bs-space-4);           /* 1rem */
  --bs-popover-header-padding-y: var(--bs-space-2);           /* 0.5rem */
  --bs-popover-header-font-size: var(--bs-font-size-base);    /* 1rem */
  --bs-popover-header-color: var(--hw-gray-900);
  --bs-popover-header-bg: var(--hw-gray-50);
  --bs-popover-header-border-color: var(--hw-gray-200);
  --bs-popover-body-padding-x: var(--bs-space-4);             /* 1rem */
  --bs-popover-body-padding-y: var(--bs-space-4);             /* 1rem */
  --bs-popover-body-color: var(--hw-gray-900);
  --bs-popover-arrow-width: 1rem;
  --bs-popover-arrow-height: 0.5rem;
  --bs-popover-arrow-border: var(--bs-popover-border-color);
}

[data-bs-theme="dark"] .popover {
  --bs-popover-bg: var(--hw-gray-800);
  --bs-popover-border-color: var(--hw-gray-700);
  --bs-popover-header-color: var(--hw-gray-100);
  --bs-popover-header-bg: var(--hw-gray-700);
  --bs-popover-header-border-color: var(--hw-gray-700);
  --bs-popover-body-color: var(--hw-gray-100);
  --bs-popover-arrow-border: var(--bs-popover-border-color);
}

/* Toast */
.toast {
  --bs-toast-zindex: var(--bs-zindex-toast);                  /* 1090 */
  --bs-toast-padding-x: var(--bs-space-3);                    /* 0.75rem */
  --bs-toast-padding-y: var(--bs-space-2);                    /* 0.5rem */
  --bs-toast-spacing: var(--bs-space-6);                      /* 1.5rem */
  --bs-toast-max-width: 350px;
  --bs-toast-font-size: var(--bs-font-size-sm);               /* 0.875rem */
  --bs-toast-color: var(--hw-gray-900);
  --bs-toast-bg: var(--hw-white);
  --bs-toast-border-width: var(--bs-border-width);            /* 1px */
  --bs-toast-border-color: var(--hw-gray-200);
  --bs-toast-border-radius: var(--bs-border-radius-lg);       /* 0.5rem */
  --bs-toast-box-shadow: var(--bs-box-shadow-lg);
  --bs-toast-header-color: var(--hw-gray-600);
  --bs-toast-header-bg: rgba(255, 255, 255, 0.85);
  --bs-toast-header-border-color: var(--hw-gray-200);
}

[data-bs-theme="dark"] .toast {
  --bs-toast-color: var(--hw-gray-100);
  --bs-toast-bg: var(--hw-gray-800);
  --bs-toast-border-color: var(--hw-gray-700);
  --bs-toast-header-color: var(--hw-gray-400);
  --bs-toast-header-bg: rgba(31, 41, 55, 0.85);
  --bs-toast-header-border-color: var(--hw-gray-700);
}

/* Badge */
.badge {
  --bs-badge-padding-x: 0.65em;
  --bs-badge-padding-y: 0.35em;
  --bs-badge-font-size: var(--bs-font-size-xs);               /* 0.75em */
  --bs-badge-font-weight: var(--bs-font-weight-bold);         /* 700 */
  --bs-badge-color: var(--hw-white);
  --bs-badge-border-radius: var(--bs-border-radius-pill);     /* 50rem */
}

/* Accordion */
.accordion {
  --bs-accordion-color: var(--hw-gray-900);
  --bs-accordion-bg: var(--hw-white);
  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-border-color: var(--hw-gray-200);
  --bs-accordion-border-width: var(--bs-border-width);        /* 1px */
  --bs-accordion-border-radius: var(--bs-border-radius-2xl);   /* 0.5rem */
  --bs-accordion-inner-border-radius: var(--bs-border-radius-2xl);
  --bs-accordion-btn-padding-x: 1.5rem;
  --bs-accordion-btn-padding-y: var(--bs-space-4);            /* 1rem */
  --bs-accordion-btn-color: var(--hw-gray-900);
  --bs-accordion-btn-bg: 'transparent';
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class=''%3E%3Cpath d='m9 18 6-6-6-6'%3E%3C/path%3E%3C/svg%3E");
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(-90deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class=''%3E%3Cpath d='m9 18 6-6-6-6'%3E%3C/path%3E%3C/svg%3E");
  --bs-accordion-btn-focus-border-color: var(--hw-blue-600);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
  --bs-accordion-body-padding-x: var(--bs-space-5);           /* 1.25rem */
  --bs-accordion-body-padding-y: 1.5rem;
  --bs-accordion-active-color: var(--hw-gray-900);
  --bs-accordion-active-bg: 'transparent';
}

.accordion-button{
  font-weight: 600;
  font-size: 1rem;
}

.accordion-button:not(.collapsed){
  box-shadow: none !important;
}

.accordion-body{
  padding-top: 1rem;
}

[data-bs-theme="dark"] .accordion {
  --bs-accordion-color: var(--hw-gray-100);
  --bs-accordion-active-color: var(--hw-gray-100);
  --bs-accordion-bg: var(--hw-gray-800);
  --bs-accordion-btn-color: var(--hw-gray-100);
  --bs-accordion-border-color: var(--hw-gray-700);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25);

  /* --bs-accordion-color: var(--hw-gray-100);
  --bs-accordion-bg: var(--hw-gray-800);
  --bs-accordion-border-color: var(--hw-gray-700);
  --bs-accordion-btn-color: var(--hw-gray-100);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f3f4f6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2360a5fa'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-border-color: var(--hw-blue-500);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25);
  --bs-accordion-active-color: var(--hw-blue-400); */
}

[data-bs-theme=dark] .accordion-button::after{
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class=''%3E%3Cpath d='m9 18 6-6-6-6'%3E%3C/path%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class=''%3E%3Cpath d='m9 18 6-6-6-6'%3E%3C/path%3E%3C/svg%3E");
}

/* Carousel */
.carousel {
  --bs-carousel-control-color: var(--hw-white);
  --bs-carousel-control-width: 15%;
  --bs-carousel-control-opacity: 0.5;
  --bs-carousel-control-hover-opacity: 0.9;
  --bs-carousel-control-transition: opacity 0.15s ease;
  --bs-carousel-indicator-width: 30px;
  --bs-carousel-indicator-height: 3px;
  --bs-carousel-indicator-hit-area-height: 10px;
  --bs-carousel-indicator-spacer: 3px;
  --bs-carousel-indicator-opacity: 0.5;
  --bs-carousel-indicator-active-bg: var(--hw-white);
  --bs-carousel-indicator-active-opacity: 1;
  --bs-carousel-indicator-transition: opacity 0.6s ease;
  --bs-carousel-caption-width: 70%;
  --bs-carousel-caption-color: var(--hw-white);
  --bs-carousel-caption-padding-y: var(--bs-space-5);         /* 1.25rem */
  --bs-carousel-caption-spacer: var(--bs-space-5);            /* 1.25rem */
  --bs-carousel-control-icon-width: 2rem;
  --bs-carousel-control-prev-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/%3e%3c/svg%3e");
  --bs-carousel-control-next-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3e%3c/svg%3e");
  --bs-carousel-transition-duration: 0.6s;
  --bs-carousel-transition: transform var(--bs-carousel-transition-duration) ease-in-out;
}

/* Spinners */
.spinner-border,
.spinner-grow {
  --bs-spinner-width: 2rem;
  --bs-spinner-height: 2rem;
  --bs-spinner-vertical-align: -0.125em;
  --bs-spinner-border-width: 0.25em;
  --bs-spinner-animation-speed: 0.75s;
  --bs-spinner-animation-name: spinner-border;
}

/* Placeholder */
.placeholder {
  --bs-placeholder-opacity-max: 0.5;
  --bs-placeholder-opacity-min: 0.2;
}

/* Cards */
.card {
  --bs-card-spacer-y: var(--bs-space-6);                      /* 1.5rem */
  --bs-card-spacer-x: var(--bs-space-6);                      /* 1.5rem */
  --bs-card-title-spacer-y: var(--bs-space-2);                /* 0.5rem */
  --bs-card-title-color: var(--hw-gray-900);
  --bs-card-subtitle-color: var(--hw-gray-600);
  --bs-card-border-width: var(--bs-border-width);             /* 1px */
  --bs-card-border-color: var(--bs-border-color);
  --bs-card-border-radius: var(--bs-border-radius-xl);        
  --bs-card-box-shadow: var(--bs-box-shadow-sm);
  --bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
  --bs-card-cap-padding-y: var(--bs-space-3);                 /* 0.75rem */
  --bs-card-cap-padding-x: var(--bs-space-6);                 /* 1.5rem */
  --bs-card-cap-bg: var(--hw-gray-50);
  --bs-card-cap-color: var(--hw-gray-600);
  --bs-card-height: auto;
  --bs-card-color: var(--hw-gray-600);
  --bs-card-bg: var(--bs-light-bg-subtle);
  --bs-card-img-overlay-padding: var(--bs-space-6);           /* 1.5rem */
  --bs-card-group-margin: var(--bs-space-3);                  /* 0.75rem */
}

[data-bs-theme="dark"] .card {
  --bs-card-title-color: var(--hw-gray-100);
  --bs-card-subtitle-color: var(--hw-gray-400);
  --bs-card-border-color: var(--hw-gray-700);
  --bs-card-cap-bg: var(--hw-gray-800);
  --bs-card-cap-color: var(--hw-gray-300);
  --bs-card-color: var(--hw-gray-100);
  --bs-card-bg: var(--hw-gray-800);
}

.card-footer {
  border-color: var(--hw-gray-100);
}

[data-bs-theme="dark"] .card-footer {
  border-color: var(--hw-gray-700);
}

/* Off Canvas */
.offcanvas {
  --bs-offcanvas-zindex: var(--bs-zindex-offcanvas-backdrop); /* 1045 */
  --bs-offcanvas-width: 400px;
  --bs-offcanvas-height: 100vh;
  --bs-offcanvas-padding-x: var(--bs-space-8);                /* 1rem */
  --bs-offcanvas-padding-y: var(--bs-space-4);                /* 1rem */
  --bs-offcanvas-color: var(--hw-gray-900);
  --bs-offcanvas-bg: var(--hw-gray-50);
  --bs-offcanvas-border-width: var(--bs-border-width);        /* 1px */
  --bs-offcanvas-border-color: var(--hw-gray-300);
  box-shadow: var(--bs-box-shadow-lg);
  --bs-offcanvas-transition: transform 0.3s ease-in-out;
  --bs-offcanvas-title-line-height: var(--bs-line-height-base); /* 1.5 */
}

.offcanvas-body{
  padding: var(--bs-space-6);
}

[data-bs-theme="dark"] .offcanvas {
  /* --bs-offcanvas-color: var(--hw-gray-100);
  --bs-offcanvas-bg: var(--hw-gray-800); */
  --bs-offcanvas-bg: var(--hw-gray-900);
  --bs-offcanvas-border-color: var(--hw-gray-700);
}

/* ================================
   ENHANCED COMPONENT STYLES
   ================================ */

/* Enhanced Button Styles */
.btn-primary {
  --bs-btn-color: var(--hw-white);
  --bs-btn-bg: var(--hw-blue-600);
  --bs-btn-border-color: var(--hw-blue-600);
  --bs-btn-hover-color: var(--hw-white);
  --bs-btn-hover-bg: var(--hw-blue-700);
  --bs-btn-hover-border-color: var(--hw-blue-700);
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
  --bs-btn-active-color: var(--hw-white);
  --bs-btn-active-bg: var(--hw-blue-800);
  --bs-btn-active-border-color: var(--hw-blue-800);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--hw-white);
  --bs-btn-disabled-bg: var(--hw-blue-600);
  --bs-btn-disabled-border-color: var(--hw-blue-600);
}

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: var(--hw-blue-500);
  --bs-btn-border-color: var(--hw-blue-500);
  --bs-btn-hover-bg: var(--hw-blue-600);
  --bs-btn-hover-border-color: var(--hw-blue-600);
  --bs-btn-focus-shadow-rgb: 96, 165, 250;
  --bs-btn-active-bg: var(--hw-blue-700);
  --bs-btn-active-border-color: var(--hw-blue-700);
  --bs-btn-disabled-bg: var(--hw-blue-500);
  --bs-btn-disabled-border-color: var(--hw-blue-500);
}

/* Enhanced Secondary Button */
.btn.btn-secondary,
button.btn-secondary {
  --bs-btn-color: var(--hw-gray-900);
  --bs-btn-bg: var(--hw-gray-100);
  --bs-btn-border-color: var(--hw-gray-200);
  --bs-btn-border-width: 2px;
  --bs-btn-hover-color: var(--hw-gray-900);
  --bs-btn-hover-bg: var(--hw-gray-200);
  --bs-btn-hover-border-color: var(--hw-gray-300);
  --bs-btn-focus-shadow-rgb: 75, 85, 99;
  --bs-btn-active-color: var(--hw-gray-900);
  --bs-btn-active-bg: var(--hw-gray-300);
  --bs-btn-active-border-color: var(--hw-gray-400);
  border-style: solid !important;
  border-width: 2px !important;
  border-color: var(--hw-gray-200) !important;
  border-bottom-width: 2px !important;
  border-bottom-color: var(--hw-gray-200) !important;
}

.btn.btn-secondary:hover,
button.btn-secondary:hover {
  border-color: var(--hw-gray-300) !important;
  border-bottom-color: var(--hw-gray-300) !important;
}

.btn.btn-secondary:focus,
.btn.btn-secondary:active,
.btn.btn-secondary.active,
button.btn-secondary:focus,
button.btn-secondary:active,
button.btn-secondary.active {
  border-color: var(--hw-gray-300) !important;
  border-bottom-color: var(--hw-gray-300) !important;
}

[data-bs-theme="dark"] .btn.btn-secondary,
[data-bs-theme="dark"] button.btn-secondary {
  --bs-btn-color: var(--hw-gray-100);
  --bs-btn-bg: var(--hw-gray-700);
  --bs-btn-border-color: var(--hw-gray-600);
  --bs-btn-border-width: 2px;
  --bs-btn-hover-color: var(--hw-gray-100);
  --bs-btn-hover-bg: var(--hw-gray-800);
  --bs-btn-hover-border-color: var(--hw-gray-700);
  --bs-btn-focus-shadow-rgb: 107, 114, 128;
  --bs-btn-active-color: var(--hw-gray-100);
  --bs-btn-active-bg: var(--hw-gray-900);
  --bs-btn-active-border-color: var(--hw-gray-800);
  border-style: solid !important;
  border-width: 2px !important;
  border-color: var(--hw-gray-600) !important;
  border-bottom-width: 2px !important;
  border-bottom-color: var(--hw-gray-600) !important;
}

[data-bs-theme="dark"] .btn.btn-secondary:hover,
[data-bs-theme="dark"] button.btn-secondary:hover {
  border-color: var(--hw-gray-700) !important;
  border-bottom-color: var(--hw-gray-700) !important;
}

[data-bs-theme="dark"] .btn.btn-secondary:focus,
[data-bs-theme="dark"] .btn.btn-secondary:active,
[data-bs-theme="dark"] .btn.btn-secondary.active,
[data-bs-theme="dark"] button.btn-secondary:focus,
[data-bs-theme="dark"] button.btn-secondary:active,
[data-bs-theme="dark"] button.btn-secondary.active {
  border-color: var(--hw-gray-800) !important;
  border-bottom-color: var(--hw-gray-800) !important;
}

/* Disabled and loading secondary buttons should have no border */
.btn.btn-secondary:disabled,
.btn.btn-secondary.disabled,
.btn.btn-secondary.btn-disabled,
.btn.btn-secondary.btn-loading,
button.btn-secondary:disabled,
button.btn-secondary.disabled,
button.btn-secondary.btn-disabled,
button.btn-secondary.btn-loading {
  border-color: transparent !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
}

[data-bs-theme="dark"] .btn.btn-secondary:disabled,
[data-bs-theme="dark"] .btn.btn-secondary.disabled,
[data-bs-theme="dark"] .btn.btn-secondary.btn-disabled,
[data-bs-theme="dark"] .btn.btn-secondary.btn-loading,
[data-bs-theme="dark"] button.btn-secondary:disabled,
[data-bs-theme="dark"] button.btn-secondary.disabled,
[data-bs-theme="dark"] button.btn-secondary.btn-disabled,
[data-bs-theme="dark"] button.btn-secondary.btn-loading {
  border-color: transparent !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
}

/* Enhanced Status Buttons */
.btn-success {
  --bs-btn-color: var(--hw-white);
  --bs-btn-bg: var(--hw-green-600);
  --bs-btn-border-color: var(--hw-green-600);
  --bs-btn-hover-color: var(--hw-white);
  --bs-btn-hover-bg: var(--hw-green-700);
  --bs-btn-hover-border-color: var(--hw-green-700);
  --bs-btn-focus-shadow-rgb: 22, 163, 74;
  --bs-btn-active-color: var(--hw-white);
  --bs-btn-active-bg: var(--hw-green-800);
  --bs-btn-active-border-color: var(--hw-green-800);
}

[data-bs-theme="dark"] .btn-success {
  --bs-btn-bg: var(--hw-green-500);
  --bs-btn-border-color: var(--hw-green-500);
  --bs-btn-hover-bg: var(--hw-green-600);
  --bs-btn-hover-border-color: var(--hw-green-600);
  --bs-btn-focus-shadow-rgb: 34, 197, 94;
  --bs-btn-active-bg: var(--hw-green-700);
  --bs-btn-active-border-color: var(--hw-green-700);
}

.btn-warning {
  --bs-btn-color: var(--hw-white);
  --bs-btn-bg: var(--hw-orange-600);
  --bs-btn-border-color: var(--hw-orange-600);
  --bs-btn-hover-color: var(--hw-white);
  --bs-btn-hover-bg: var(--hw-orange-700);
  --bs-btn-hover-border-color: var(--hw-orange-700);
  --bs-btn-focus-shadow-rgb: 234, 88, 12;
  --bs-btn-active-color: var(--hw-white);
  --bs-btn-active-bg: var(--hw-orange-800);
  --bs-btn-active-border-color: var(--hw-orange-800);
}

.btn-danger {
  --bs-btn-color: var(--hw-white);
  --bs-btn-bg: var(--hw-red-600);
  --bs-btn-border-color: var(--hw-red-600);
  --bs-btn-hover-color: var(--hw-white);
  --bs-btn-hover-bg: var(--hw-red-700);
  --bs-btn-hover-border-color: var(--hw-red-700);
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
  --bs-btn-active-color: var(--hw-white);
  --bs-btn-active-bg: var(--hw-red-800);
  --bs-btn-active-border-color: var(--hw-red-800);
}

[data-bs-theme="dark"] .btn-warning {
  --bs-btn-bg: var(--hw-orange-500);
  --bs-btn-border-color: var(--hw-orange-500);
  --bs-btn-hover-bg: var(--hw-orange-600);
  --bs-btn-hover-border-color: var(--hw-orange-600);
  --bs-btn-focus-shadow-rgb: 249, 115, 22;
  --bs-btn-active-bg: var(--hw-orange-700);
  --bs-btn-active-border-color: var(--hw-orange-700);
}

[data-bs-theme="dark"] .btn-danger {
  --bs-btn-bg: var(--hw-red-500);
  --bs-btn-border-color: var(--hw-red-500);
  --bs-btn-hover-bg: var(--hw-red-600);
  --bs-btn-hover-border-color: var(--hw-red-600);
  --bs-btn-focus-shadow-rgb: 239, 68, 68;
  --bs-btn-active-bg: var(--hw-red-700);
  --bs-btn-active-border-color: var(--hw-red-700);
}

/* Custom Alert Enhancements */
.alert-primary {
  --bs-alert-color: var(--hw-blue-700);
  --bs-alert-bg: var(--hw-blue-50);
  --bs-alert-border-color: var(--hw-blue-200);
  --bs-alert-link-color: var(--hw-blue-800);
}

[data-bs-theme="dark"] .alert-primary {
  --bs-alert-color: var(--hw-blue-400);
  --bs-alert-bg: var(--hw-blue-950);
  --bs-alert-border-color: var(--hw-blue-800);
  --bs-alert-link-color: var(--hw-blue-300);
}

.alert-success {
  --bs-alert-color: var(--hw-green-700);
  --bs-alert-bg: var(--hw-green-50);
  --bs-alert-border-color: var(--hw-green-200);
  --bs-alert-link-color: var(--hw-green-800);
}

[data-bs-theme="dark"] .alert-success {
  --bs-alert-color: var(--hw-green-400);
  --bs-alert-bg: var(--hw-green-950);
  --bs-alert-border-color: var(--hw-green-800);
  --bs-alert-link-color: var(--hw-green-300);
}

.alert-info {
  --bs-alert-color: var(--hw-blue-700);
  --bs-alert-bg: var(--hw-blue-50);
  --bs-alert-border-color: var(--hw-blue-200);
  --bs-alert-link-color: var(--hw-blue-800);
}

[data-bs-theme="dark"] .alert-info {
  --bs-alert-color: var(--hw-blue-400);
  --bs-alert-bg: var(--hw-blue-950);
  --bs-alert-border-color: var(--hw-blue-800);
  --bs-alert-link-color: var(--hw-blue-300);
}

.alert-warning {
  --bs-alert-color: var(--hw-orange-700);
  --bs-alert-bg: var(--hw-orange-50);
  --bs-alert-border-color: var(--hw-orange-200);
  --bs-alert-link-color: var(--hw-orange-800);
}

[data-bs-theme="dark"] .alert-warning {
  --bs-alert-color: var(--hw-orange-400);
  --bs-alert-bg: var(--hw-orange-950);
  --bs-alert-border-color: var(--hw-orange-800);
  --bs-alert-link-color: var(--hw-orange-300);
}

.alert-danger {
  --bs-alert-color: var(--hw-red-700);
  --bs-alert-bg: var(--hw-red-50);
  --bs-alert-border-color: var(--hw-red-200);
  --bs-alert-link-color: var(--hw-red-800);
}

[data-bs-theme="dark"] .alert-danger {
  --bs-alert-color: var(--hw-red-400);
  --bs-alert-bg: var(--hw-red-950);
  --bs-alert-border-color: var(--hw-red-800);
  --bs-alert-link-color: var(--hw-red-300);
}

/* Enhanced Badge Styles */
.badge {
  --bs-badge-border-radius: var(--bs-border-radius-xl);
  --bs-badge-font-weight: 500;
}

.badge.text-bg-primary {
  --bs-badge-color: var(--hw-white);
  --bs-badge-bg: var(--hw-blue-600);
}

[data-bs-theme="dark"] .badge.text-bg-primary {
  --bs-badge-bg: var(--hw-blue-500);
}

.badge.text-bg-secondary {
  --bs-badge-color: var(--hw-white);
  --bs-badge-bg: var(--hw-gray-600);
}

[data-bs-theme="dark"] .badge.text-bg-secondary {
  --bs-badge-color: var(--hw-gray-100);
  --bs-badge-bg: var(--hw-gray-500);
}

.badge.text-bg-success {
  --bs-badge-color: var(--hw-white);
  --bs-badge-bg: var(--hw-green-600);
}

[data-bs-theme="dark"] .badge.text-bg-success {
  --bs-badge-bg: var(--hw-green-500);
}

.badge.text-bg-warning {
  --bs-badge-color: var(--hw-white);
  --bs-badge-bg: var(--hw-orange-600);
}

.badge.text-bg-danger {
  --bs-badge-color: var(--hw-white);
  --bs-badge-bg: var(--hw-red-600);
}

.badge.text-bg-info {
  --bs-badge-color: var(--hw-white);
  --bs-badge-bg: var(--hw-blue-500);
}

[data-bs-theme="dark"] .badge.text-bg-info {
  --bs-badge-bg: var(--hw-blue-400);
}

.badge.text-bg-light {
  --bs-badge-color: var(--hw-gray-800);
  --bs-badge-bg: var(--hw-gray-100);
}

[data-bs-theme="dark"] .badge.text-bg-light {
  --bs-badge-color: var(--hw-gray-100);
  --bs-badge-bg: var(--hw-gray-700);
}

.badge.text-bg-dark {
  --bs-badge-color: var(--hw-white);
  --bs-badge-bg: var(--hw-gray-900);
}

[data-bs-theme="dark"] .badge.text-bg-dark {
  --bs-badge-color: var(--hw-gray-900);
  --bs-badge-bg: var(--hw-gray-100);
}

/* Nav Tabs */
.nav-tabs {
  --bs-nav-tabs-border-width: var(--bs-border-width);
  --bs-nav-tabs-border-color: var(--hw-gray-200);
  --bs-nav-tabs-border-radius: var(--bs-border-radius);
  --bs-nav-tabs-link-hover-border-color: var(--hw-gray-200) var(--hw-gray-200) var(--bs-nav-tabs-border-color);
  --bs-nav-tabs-link-active-color: var(--hw-gray-600);
  --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
  --bs-nav-tabs-link-active-border-color: var(--hw-gray-200) var(--hw-gray-200) var(--bs-body-bg);
}

[data-bs-theme="dark"] .nav-tabs {
  --bs-nav-tabs-border-color: var(--hw-gray-700);
  --bs-nav-tabs-link-hover-border-color: var(--hw-gray-700) var(--hw-gray-700) var(--bs-nav-tabs-border-color);
  --bs-nav-tabs-link-active-color: var(--hw-gray-400);
  --bs-nav-tabs-link-active-border-color: var(--hw-gray-700) var(--hw-gray-700) var(--bs-body-bg);
}

/* Nav Pills */
.nav-pills {
  --bs-nav-pills-border-radius: var(--bs-border-radius);
  --bs-nav-pills-link-active-color: var(--hw-white);
  --bs-nav-pills-link-active-bg: var(--hw-blue-600);
}

[data-bs-theme="dark"] .nav-pills {
  --bs-nav-pills-link-active-bg: var(--hw-blue-500);
}

/* Input Groups */
.input-group {
  --bs-input-group-addon-padding-y: var(--bs-space-2);
  --bs-input-group-addon-padding-x: var(--bs-space-3);
  --bs-input-group-addon-font-weight: var(--bs-font-weight-normal);
  --bs-input-group-addon-color: var(--hw-gray-500);
  --bs-input-group-addon-bg: var(--hw-gray-100);
  --bs-input-group-addon-border-color: var(--hw-gray-300);
}

[data-bs-theme="dark"] .input-group {
  --bs-input-group-addon-color: var(--hw-gray-400);
  --bs-input-group-addon-bg: var(--hw-gray-700);
  --bs-input-group-addon-border-color: var(--hw-gray-600);
}

/* Form Check (Checkboxes/Radio) */
.form-check-input {
  --bs-form-check-bg: var(--hw-white);
  --bs-form-check-border: var(--bs-border-width) solid var(--hw-gray-300);
  --bs-form-check-border-radius: var(--bs-border-radius-sm);
  --bs-form-check-transition: background-color 0.15s ease-in-out, background-position 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  --bs-form-check-focus-border: var(--hw-blue-600);
  --bs-form-check-focus-box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
  --bs-form-check-checked-color: var(--hw-white);
  --bs-form-check-checked-bg-color: var(--hw-blue-600);
  --bs-form-check-checked-border-color: var(--hw-blue-600);
  --bs-form-check-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  --bs-form-check-indeterminate-color: var(--hw-white);
  --bs-form-check-indeterminate-bg-color: var(--hw-blue-600);
  --bs-form-check-indeterminate-border-color: var(--hw-blue-600);
  --bs-form-check-indeterminate-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3e%3cpath fill-rule='evenodd' d='M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-check-input {
  --bs-form-check-bg: var(--hw-gray-800);
  --bs-form-check-border: var(--bs-border-width) solid var(--hw-gray-600);
  --bs-form-check-focus-border: var(--hw-blue-500);
  --bs-form-check-focus-box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25);
  --bs-form-check-checked-bg-color: var(--hw-blue-500);
  --bs-form-check-checked-border-color: var(--hw-blue-500);
  --bs-form-check-indeterminate-bg-color: var(--hw-blue-500);
  --bs-form-check-indeterminate-border-color: var(--hw-blue-500);
}

/* Form Range (Sliders) */
.form-range {
  --bs-form-range-track-width: 100%;
  --bs-form-range-track-height: 0.5rem;
  --bs-form-range-track-cursor: pointer;
  --bs-form-range-track-bg: var(--hw-gray-200);
  --bs-form-range-track-border-radius: 1rem;
  --bs-form-range-track-box-shadow: var(--bs-box-shadow-inner);
  --bs-form-range-thumb-width: 1rem;
  --bs-form-range-thumb-height: var(--bs-form-range-thumb-width);
  --bs-form-range-thumb-bg: var(--hw-blue-600);
  --bs-form-range-thumb-border: 0;
  --bs-form-range-thumb-border-radius: 1rem;
  --bs-form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
  --bs-form-range-thumb-focus-box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
  --bs-form-range-thumb-focus-box-shadow-width: 0.25rem;
  --bs-form-range-thumb-active-bg: var(--hw-blue-500);
  --bs-form-range-thumb-disabled-bg: var(--hw-gray-500);
  --bs-form-range-track-disabled-bg: var(--hw-gray-100);
}

[data-bs-theme="dark"] .form-range {
  --bs-form-range-track-bg: var(--hw-gray-700);
  --bs-form-range-thumb-bg: var(--hw-blue-500);
  --bs-form-range-thumb-focus-box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 0.25rem rgba(96, 165, 250, 0.25);
  --bs-form-range-thumb-active-bg: var(--hw-blue-400);
  --bs-form-range-thumb-disabled-bg: var(--hw-gray-600);
  --bs-form-range-track-disabled-bg: var(--hw-gray-800);
}

/* Form Switch */
.form-switch {
  --bs-form-switch-color: rgba(0, 0, 0, 0.25);
  --bs-form-switch-width: 2em;
  --bs-form-switch-height: 1em;
  --bs-form-switch-border-radius: var(--bs-form-switch-height);
  --bs-form-switch-bg: var(--hw-gray-300);
  --bs-form-switch-checked-color: var(--hw-white);
  --bs-form-switch-checked-bg: var(--hw-blue-600);
  --bs-form-switch-focus-color: var(--bs-form-switch-checked-color);
  --bs-form-switch-focus-bg: var(--bs-form-switch-checked-bg);
}

[data-bs-theme="dark"] .form-switch {
  --bs-form-switch-bg: var(--hw-gray-600);
  --bs-form-switch-checked-bg: var(--hw-blue-500);
  --bs-form-switch-focus-bg: var(--bs-form-switch-checked-bg);
}

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

/* Shadow Usage */
.hw-shadow-soft { box-shadow: var(--bs-box-shadow-sm); }
.hw-shadow-medium { box-shadow: var(--bs-box-shadow); }
.hw-shadow-strong { box-shadow: var(--bs-box-shadow-lg); }
.hw-shadow-intense { box-shadow: var(--bs-box-shadow-xl); }

/* Border Radius Usage */
.hw-rounded-sm { border-radius: var(--bs-border-radius-sm); }
.hw-rounded { border-radius: var(--bs-border-radius); }
.hw-rounded-lg { border-radius: var(--bs-border-radius-lg); }
.hw-rounded-xl { border-radius: var(--bs-border-radius-xl); }
.hw-rounded-2xl { border-radius: var(--bs-border-radius-2xl); }
.hw-rounded-pill { border-radius: var(--bs-border-radius-pill); }

/* Spacing Usage */
.hw-p-1 { padding: var(--bs-space-1); }
.hw-p-2 { padding: var(--bs-space-2); }
.hw-p-3 { padding: var(--bs-space-3); }
.hw-p-4 { padding: var(--bs-space-4); }
.hw-p-6 { padding: var(--bs-space-6); }
.hw-p-8 { padding: var(--bs-space-8); }

.hw-py-8 { padding-top: var(--bs-space-8); padding-bottom: var(--bs-space-8); }

.hw-m-1 { margin: var(--bs-space-1); }
.hw-m-2 { margin: var(--bs-space-2); }
.hw-m-3 { margin: var(--bs-space-3); }
.hw-m-4 { margin: var(--bs-space-4); }
.hw-m-6 { margin: var(--bs-space-6); }
.hw-m-8 { margin: var(--bs-space-8); }

.hw-gap-2 { gap: var(--bs-space-2); }
.hw-gap-3 { gap: var(--bs-space-3); }
.hw-gap-4 { gap: var(--bs-space-4); }
.hw-gap-6 { gap: var(--bs-space-6); }

/* Color Usage */
.hw-text-primary { color: var(--hw-blue-600); }
.hw-text-secondary { color: var(--hw-gray-600); }
.hw-text-success { color: var(--hw-green-600); }
.hw-text-danger { color: var(--hw-red-600); }
.hw-text-warning { color: var(--hw-orange-600); }
.hw-text-info { color: var(--hw-blue-500); }

[data-bs-theme="dark"] .hw-text-primary { color: var(--hw-blue-400); }
[data-bs-theme="dark"] .hw-text-secondary { color: var(--hw-gray-400); }
[data-bs-theme="dark"] .hw-text-success { color: var(--hw-green-400); }
[data-bs-theme="dark"] .hw-text-danger { color: var(--hw-red-400); }
[data-bs-theme="dark"] .hw-text-warning { color: var(--hw-orange-400); }
[data-bs-theme="dark"] .hw-text-info { color: var(--hw-blue-300); }

/* Background Usage */
.hw-bg-primary { background-color: var(--hw-blue-600); }
.hw-bg-secondary { background-color: var(--hw-gray-600); }
.hw-bg-success { background-color: var(--hw-green-600); }
.hw-bg-danger { background-color: var(--hw-red-600); }
.hw-bg-warning { background-color: var(--hw-orange-600); }
.hw-bg-info { background-color: var(--hw-blue-500); }

[data-bs-theme="dark"] .hw-bg-primary { background-color: var(--hw-blue-500); }
[data-bs-theme="dark"] .hw-bg-secondary { background-color: var(--hw-gray-500); }
[data-bs-theme="dark"] .hw-bg-success { background-color: var(--hw-green-500); }
[data-bs-theme="dark"] .hw-bg-danger { background-color: var(--hw-red-500); }
[data-bs-theme="dark"] .hw-bg-warning { background-color: var(--hw-orange-500); }
[data-bs-theme="dark"] .hw-bg-info { background-color: var(--hw-blue-400); }

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

.hw-heading-1 { font-size: var(--bs-h1-font-size); }
.hw-heading-2 { font-size: var(--bs-h2-font-size); }
.hw-heading-3 { font-size: var(--bs-h3-font-size); }
.hw-heading-4 { font-size: var(--bs-h4-font-size); }
.hw-heading-5 { font-size: var(--bs-h5-font-size); }
.hw-heading-6 { font-size: var(--bs-h6-font-size); }
/* Remove underlines from all buttons globally but exclude badges */
.btn,
.btn:hover,
.btn:active,
.btn:focus,
.btn span {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
}

/* Removed the rule that was removing border-bottom from all buttons */