/* =====================================================
   ROOT VARIABLES
===================================================== */
:root {
  /* Colors */
  --color-bg: #131413;
  --color-bg-sidebar: #101010;
  --color-bg-card: #131413;
  --color-border: #222322;
  --color-text: #ffffff;
  --color-text-muted: #bfbfbf;
  --color-placeholder: #333232;
  --color-hover: #1c1c1c;
  --color-surface: #2a2a2a;
  --color-accent: #5f77ff;
  --color-progress-bg: #323439;
  --color-progress: linear-gradient(90deg, #3b82f6, #2563eb);
  /* Fonts */
  --font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* Layout */
  --sidebar-width: 80px;
  --sidebar-secondary-width: 280px;
  --navbar-height: 55px;
  --border-radius: 10px;
  /* Effects */
  --transition-speed: 0.2s;
  --shadow-accent: 0 0 6px rgba(95, 124, 255, 0.5);
  /* Tooltip */ 
  --color-tooltip-bg: #222322;
  --color-tooltip-text: #FFFFFF; 
  --transition-speed: 0.2s; 
  --tooltip-offset: 8px;
  --arrow-size: 8px; 
}