/* ==========================================================================
   Wishy Design System - CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
  /* ========================================
     Typography
     ======================================== */
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Neutral ladder (Tailwind slate → CSS vars; light defaults) */
  --neutral-50: 248 250 252;
  --neutral-100: 241 245 249;
  --neutral-200: 226 232 240;
  --neutral-300: 203 213 225;
  --neutral-400: 148 163 184;
  --neutral-500: 100 116 139;
  --neutral-600: 71 85 105;
  --neutral-700: 51 65 85;
  --neutral-800: 30 41 59;
  --neutral-900: 15 23 42;
  --neutral-950: 2 6 23;

  /* Font Sizes */
  --text-xs: 0.75rem;
  /* 12px */
  --text-sm: 0.875rem;
  /* 14px */
  --text-base: 1rem;
  /* 16px */
  --text-lg: 1.125rem;
  /* 18px */
  --text-xl: 1.25rem;
  /* 20px */
  --text-2xl: 1.5rem;
  /* 24px */
  --text-3xl: 1.875rem;
  /* 30px */
  --text-4xl: 2.25rem;
  /* 36px */
  --text-5xl: 3rem;
  /* 48px */

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Letter Spacing (Tracking) */
  --tracking-tighter: -0.02em;
  /* -2% for premium headlines */
  --tracking-tight: -0.01em;
  /* -1% for large text */
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ========================================
     Spacing Scale
     ======================================== */
  --space-0: 0;
  --space-1: 0.25rem;
  /* 4px */
  --space-2: 0.5rem;
  /* 8px */
  --space-3: 0.75rem;
  /* 12px */
  --space-4: 1rem;
  /* 16px */
  --space-5: 1.25rem;
  /* 20px */
  --space-6: 1.5rem;
  /* 24px */
  --space-8: 2rem;
  /* 32px */
  --space-10: 2.5rem;
  /* 40px */
  --space-12: 3rem;
  /* 48px */
  --space-16: 4rem;
  /* 64px */
  --space-20: 5rem;
  /* 80px */
  --space-24: 6rem;
  /* 96px */

  /* ========================================
     Border Radius
     ======================================== */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  /* 4px */
  --radius-md: 0.375rem;
  /* 6px */
  --radius-lg: 0.5rem;
  /* 8px */
  --radius-xl: 0.75rem;
  /* 12px */
  --radius-2xl: 1rem;
  /* 16px */
  --radius-3xl: 1.5rem;
  /* 24px */
  --radius-full: 9999px;

  /* ========================================
     Transitions
     ======================================== */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-slower: 500ms ease;

  /* ========================================
     Z-Index Scale
     ======================================== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
}

/* ==========================================================================
   Light Theme (Default)
   ========================================================================== */
:root,
[data-theme="light"] {
  /* Primary Colors - Emerald accent */
  --color-primary-50: #ecfdf5;
  --color-primary-100: #d1fae5;
  --color-primary-200: #a7f3d0;
  --color-primary-300: #6ee7b7;
  --color-primary-400: #34d399;
  --color-primary-500: #10b981;
  --color-primary-600: #059669;
  --color-primary-700: #047857;
  --color-primary-800: #065f46;
  --color-primary-900: #064e3b;
  --color-primary-950: #022c22;

  /* Surfaces - Light slate page so white cards elevate */
  --color-surface-base: #F8FAFC;
  --color-surface-raised: #ffffff;
  --color-surface-overlay: #ffffff;
  --color-surface-sunken: #F1F5F9;
  --color-surface-hover: #F1F5F9;

  /* Semantic aliases */
  --background: var(--color-surface-base);
  --foreground: var(--color-text-primary);
  --card: var(--color-surface-raised);
  --border: var(--color-border-default);
  --muted: var(--color-text-muted);
  --surface-base: var(--color-surface-base);
  --surface-raised: var(--color-surface-raised);
  --surface-overlay: var(--color-surface-overlay);

  /* Borders - Extremely subtle 1px (Kole Jain) */
  --color-border-default: rgba(15, 23, 42, 0.08);
  --color-border-muted: #F1F5F9;
  --color-border-emphasis: #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-border-focus: #059669;
  --border-1: 1px;
  --border-2: 2px;

  /* Text - Deep slate, no pure #000 */
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted: #94A3B8;
  --color-text-placeholder: #94A3B8;
  --color-text-inverse: #ffffff;
  --color-text-link: #059669;
  --color-text-link-hover: #047857;

  /* Semantic Colors */
  --color-success-50: #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803d;

  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;

  --color-error-50: #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;

  --color-info-50: #eff6ff;
  --color-info-100: #dbeafe;
  --color-info-500: #3b82f6;
  --color-info-600: #2563eb;
  --color-info-700: #1d4ed8;

  /* Shadows - Stacked Soft Shadows (Kole Jain) */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.04), 0 4px 12px -4px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 20px -4px rgba(0, 0, 0, 0.05), 0 10px 40px -8px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 8px 30px -6px rgba(0, 0, 0, 0.06), 0 16px 50px -12px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 12px 40px -8px rgba(0, 0, 0, 0.08), 0 20px 60px -16px rgba(0, 0, 0, 0.05);
  --shadow-2xl: 0 20px 50px -12px rgba(0, 0, 0, 0.1), 0 30px 80px -20px rgba(0, 0, 0, 0.06);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.03);
  --shadow-primary: 0 4px 20px -4px rgba(5, 150, 105, 0.15), 0 10px 40px -8px rgba(5, 150, 105, 0.1);
  --shadow-primary-lg: 0 8px 30px -6px rgba(5, 150, 105, 0.2), 0 16px 50px -12px rgba(5, 150, 105, 0.12);
  --shadow-error: 0 4px 20px -4px rgba(239, 68, 68, 0.15);
  --shadow-success: 0 4px 20px -4px rgba(34, 197, 94, 0.15);
  --shadow-card: 0 8px 30px rgba(15, 23, 42, 0.04);
  --shadow-hover: 0 20px 40px rgba(15, 23, 42, 0.08);
  --shadow-overlay: 0 16px 40px rgba(15, 23, 42, 0.12);

  /* Focus Ring - Halo Effect (Kole Jain) */
  --ring-color: rgba(5, 150, 105, 0.15);
  --ring-width: 3px;
  --ring-offset-color: #ffffff;
  --ring-offset-width: 2px;
  --focus-halo: 0 0 0 3px rgba(5, 150, 105, 0.1), 0 0 0 6px rgba(5, 150, 105, 0.05);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-blur: 12px;

  /* Gradients - Subtle inner glow for primary buttons (Kole Jain) */
  --gradient-primary: linear-gradient(180deg, #0ea572 0%, #059669 100%);
  --gradient-primary-hover: linear-gradient(180deg, #10b981 0%, #059669 100%);
  --gradient-error: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
  --gradient-success: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
  --gradient-hero: linear-gradient(135deg, #F9FAFB 0%, #ecfdf5 50%, #F9FAFB 100%);
  --gradient-card: linear-gradient(180deg, transparent 0%, rgba(249, 250, 251, 0.5) 100%);
}

/* ==========================================================================
   Dark Theme (bluish Slate — existing)
   ========================================================================== */
.dark,
[data-theme="dark"] {
  /* Neutral ladder — bluish slate (drives Tailwind slate-*) */
  --neutral-50: 248 250 252;
  --neutral-100: 241 245 249;
  --neutral-200: 226 232 240;
  --neutral-300: 203 213 225;
  --neutral-400: 148 163 184;
  --neutral-500: 100 116 139;
  --neutral-600: 71 85 105;
  --neutral-700: 51 65 85;
  --neutral-800: 30 41 59;
  --neutral-900: 15 23 42;
  --neutral-950: 2 6 23;

  /* Primary Colors remain consistent */
  --color-primary-50: #ecfdf5;
  --color-primary-100: #d1fae5;
  --color-primary-200: #a7f3d0;
  --color-primary-300: #6ee7b7;
  --color-primary-400: #34d399;
  --color-primary-500: #10b981;
  --color-primary-600: #059669;
  --color-primary-700: #047857;
  --color-primary-800: #065f46;
  --color-primary-900: #064e3b;
  --color-primary-950: #022c22;

  /* Surfaces — bluish slate */
  --color-surface-base: #020617;
  --color-surface-raised: #0f172a;
  --color-surface-overlay: #1e293b;
  --color-surface-sunken: #020617;

  /* Semantic aliases */
  --background: var(--color-surface-base);
  --foreground: var(--color-text-primary);
  --card: var(--color-surface-raised);
  --border: var(--color-border-default);
  --muted: var(--color-text-muted);
  --surface-base: var(--color-surface-base);
  --surface-raised: var(--color-surface-raised);
  --surface-overlay: var(--color-surface-overlay);

  /* Borders */
  --color-border-default: #1e293b;
  --color-border-muted: #0f172a;
  --color-border-emphasis: #334155;
  --color-border-focus: #34d399;

  /* Text */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-text-placeholder: #64748b;
  --color-text-inverse: #0f172a;
  --color-text-link: #34d399;
  --color-text-link-hover: #6ee7b7;

  /* Semantic Colors */
  --color-success-50: rgb(34 197 94 / 0.1);
  --color-success-100: rgb(34 197 94 / 0.2);
  --color-success-500: #22c55e;
  --color-success-600: #4ade80;
  --color-success-700: #86efac;

  --color-warning-50: rgb(245 158 11 / 0.1);
  --color-warning-100: rgb(245 158 11 / 0.2);
  --color-warning-500: #f59e0b;
  --color-warning-600: #fbbf24;
  --color-warning-700: #fcd34d;

  --color-error-50: rgb(239 68 68 / 0.1);
  --color-error-100: rgb(239 68 68 / 0.2);
  --color-error-500: #ef4444;
  --color-error-600: #f87171;
  --color-error-700: #fca5a5;

  --color-info-50: rgb(59 130 246 / 0.1);
  --color-info-100: rgb(59 130 246 / 0.2);
  --color-info-500: #3b82f6;
  --color-info-600: #60a5fa;
  --color-info-700: #93c5fd;

  /* Shadows — Slate dark keeps soft depth */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.2), 0 4px 12px -4px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 20px -4px rgba(0, 0, 0, 0.25), 0 10px 40px -8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 30px -6px rgba(0, 0, 0, 0.3), 0 16px 50px -12px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 12px 40px -8px rgba(0, 0, 0, 0.35), 0 20px 60px -16px rgba(0, 0, 0, 0.25);
  --shadow-2xl: 0 20px 50px -12px rgba(0, 0, 0, 0.4), 0 30px 80px -20px rgba(0, 0, 0, 0.3);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.15);
  --shadow-primary: 0 4px 20px -4px rgba(16, 185, 129, 0.2), 0 10px 40px -8px rgba(16, 185, 129, 0.12);
  --shadow-primary-lg: 0 8px 30px -6px rgba(16, 185, 129, 0.25), 0 16px 50px -12px rgba(16, 185, 129, 0.15);
  --shadow-error: 0 4px 20px -4px rgba(239, 68, 68, 0.2);
  --shadow-success: 0 4px 20px -4px rgba(34, 197, 94, 0.2);
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.25);
  --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.35);
  --shadow-overlay: 0 16px 40px rgba(0, 0, 0, 0.45);

  /* Focus Ring - Halo Effect (Dark) */
  --ring-color: rgba(52, 211, 153, 0.2);
  --ring-width: 3px;
  --ring-offset-color: #0f172a;
  --ring-offset-width: 2px;
  --focus-halo: 0 0 0 3px rgba(52, 211, 153, 0.15), 0 0 0 6px rgba(52, 211, 153, 0.08);

  /* Borders */
  --color-border-strong: #475569;
  --border-1: 1px;
  --border-2: 2px;

  /* Glassmorphism */
  --glass-bg: rgba(15, 23, 42, 0.7);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: 12px;

  /* Gradients */
  --gradient-primary: linear-gradient(180deg, #10b981 0%, #059669 100%);
  --gradient-primary-hover: linear-gradient(180deg, #34d399 0%, #10b981 100%);
  --gradient-error: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
  --gradient-success: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
  --gradient-hero: linear-gradient(135deg, #0f172a 0%, #064e3b 50%, #1e293b 100%);
  --gradient-card: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.5) 100%);
}

/* ==========================================================================
   Dark Zinc Theme (neutral elevation + outlines)
   ========================================================================== */
.dark.zinc,
[data-theme="zinc"] {
  /* Neutral ladder — zinc (drives Tailwind slate-*) */
  --neutral-50: 250 250 250;
  --neutral-100: 244 244 245;
  --neutral-200: 228 228 231;
  --neutral-300: 212 212 216;
  --neutral-400: 161 161 170;
  --neutral-500: 113 113 122;
  --neutral-600: 82 82 91;
  --neutral-700: 63 63 70;
  --neutral-800: 39 39 42;
  --neutral-900: 24 24 27;
  --neutral-950: 9 9 11;

  /* Surfaces — zinc L0–L3 */
  --color-surface-base: #09090B;
  --color-surface-raised: #18181B;
  --color-surface-overlay: #3F3F46;
  --color-surface-sunken: #09090B;
  --color-surface-hover: #27272A;

  --background: var(--color-surface-base);
  --foreground: var(--color-text-primary);
  --card: var(--color-surface-raised);
  --border: var(--color-border-default);
  --muted: var(--color-text-muted);
  --surface-base: var(--color-surface-base);
  --surface-raised: #27272A;
  --surface-overlay: var(--color-surface-overlay);

  /* Borders — soft white outlines */
  --color-border-default: rgba(255, 255, 255, 0.08);
  --color-border-muted: rgba(255, 255, 255, 0.05);
  --color-border-emphasis: rgba(255, 255, 255, 0.12);
  --color-border-strong: #3F3F46;
  --color-border-focus: #34d399;

  /* Text — soft body; white only for highest emphasis */
  --color-text-primary: #E4E4E7;
  --color-text-secondary: #A1A1AA;
  --color-text-muted: #A1A1AA;
  --color-text-placeholder: #71717A;
  --color-text-inverse: #09090B;
  --color-text-link: #34d399;
  --color-text-link-hover: #6ee7b7;

  /* Elevation via surface lightness — card shadows off */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-2xl: none;
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.15);
  --shadow-primary: 0 4px 20px -4px rgba(16, 185, 129, 0.12);
  --shadow-primary-lg: 0 8px 30px -6px rgba(16, 185, 129, 0.15);
  --shadow-error: 0 4px 20px -4px rgba(239, 68, 68, 0.15);
  --shadow-success: 0 4px 20px -4px rgba(34, 197, 94, 0.15);
  --shadow-card: none;
  --shadow-hover: none;
  --shadow-overlay: 0 16px 40px rgba(0, 0, 0, 0.45);

  --ring-offset-color: #18181B;

  --glass-bg: rgba(24, 24, 27, 0.7);
  --glass-border: rgba(255, 255, 255, 0.08);

  --gradient-hero: linear-gradient(135deg, #09090B 0%, #18181B 50%, #27272A 100%);
  --gradient-card: linear-gradient(180deg, transparent 0%, rgba(24, 24, 27, 0.5) 100%);
}

/* ==========================================================================
   Accessibility - Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Component Base Styles
   ========================================================================== */

/* Focus Ring Utility */
.focus-ring {
  outline: none;
}

.focus-ring:focus-visible {
  outline: 2px solid var(--ring-color);
  outline-offset: var(--ring-offset-width);
}

/* Glass Effect */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
}

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(90deg,
      var(--color-surface-sunken) 0%,
      var(--color-border-default) 50%,
      var(--color-surface-sunken) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Toast Animations */
@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.toast-enter {
  animation: toast-slide-in var(--transition-base);
}

.toast-exit {
  animation: toast-slide-out var(--transition-base);
}

/* ==========================================================================
   Additional Semantic Tokens
   ========================================================================== */

:root,
[data-theme="light"] {
  /* Additional gradients */
  --gradient-primary-hover: linear-gradient(135deg, rgb(var(--primary-600)) 0%, rgb(var(--primary-500)) 100%);
  --gradient-success: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
  --gradient-error: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);

  /* Hover states */
  --color-surface-hover: #f8fafc;
  --color-border-strong: #94a3b8;

  /* Additional shadows */
  --shadow-success: 0 4px 14px 0 rgb(34 197 94 / 0.25);
  --shadow-error: 0 4px 14px 0 rgb(239 68 68 / 0.25);

  /* Border widths */
  --border-1: 1px;
  --border-2: 2px;

  /* Ring width */
  --ring-width: 2px;
}

.dark,
[data-theme="dark"] {
  /* Additional gradients */
  --gradient-primary-hover: linear-gradient(135deg, rgb(var(--primary-500)) 0%, rgb(var(--primary-400)) 100%);
  --gradient-success: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
  --gradient-error: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);

  /* Hover states */
  --color-surface-hover: #1e293b;
  --color-border-strong: #475569;

  /* Additional shadows */
  --shadow-success: 0 4px 14px 0 rgb(34 197 94 / 0.3);
  --shadow-error: 0 4px 14px 0 rgb(239 68 68 / 0.3);

  /* Border widths */
  --border-1: 1px;
  --border-2: 2px;

  /* Ring width */
  --ring-width: 2px;
}

.dark.zinc,
[data-theme="zinc"] {
  --color-surface-hover: #27272A;
  --color-border-strong: #3F3F46;
  --shadow-success: none;
  --shadow-error: none;
  --ring-width: 2px;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-surface-base);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-default);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-emphasis);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-default) var(--color-surface-base);
}

/* Selection */
::selection {
  background-color: var(--color-primary-200);
  color: var(--color-primary-900);
}

.dark ::selection {
  background-color: var(--color-primary-800);
  color: var(--color-primary-100);
}

.toast-exit {
  animation: toast-slide-out var(--transition-base);
}

/* Modal Animations */
@keyframes modal-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-backdrop {
  animation: modal-fade-in var(--transition-base);
}

.modal-content {
  animation: modal-scale-in var(--transition-base);
}

/* Mobile Menu Slide */
@keyframes slide-in-left {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slide-out-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.mobile-menu-enter {
  animation: slide-in-left var(--transition-slow);
}

.mobile-menu-exit {
  animation: slide-out-left var(--transition-slow);
}

/* Scrollbar Styling */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--color-border-emphasis);
  border-radius: var(--radius-full);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}