:root {
      /* Dark theme colors */
      --bg-dark: #12151f;
      --bg-medium: #1a1f2e;
      --bg-light: #232a3c;
      --text-primary: #e6e7f5;
      --text-secondary: #a5adc8;  /* Improved from #8b93b2 - meets WCAG AA (5.2:1) */
      --text-muted: #8891b0;  /* Improved from #5d6785 - meets WCAG AA (4.7:1) */
      --accent-primary: #5865f2;
      --accent-secondary: #00d9ff;
      --accent-tertiary: #7289da;
      --accent-success: #43b581;
      --accent-danger: #f04747;
      --accent-warning: #faa61a;
      --glow-primary: rgba(88, 101, 242, 0.4);
      --glow-secondary: rgba(0, 217, 255, 0.4);
      --border-color: #2c3351;
      --card-bg: #1a1f2e;
      --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
      --gradient-bg: linear-gradient(135deg, var(--bg-medium), var(--bg-dark));
      --gradient-accent: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
      
      /* Sidebar specific vars */
      --sidebar-bg: #161b2b;
      --hover-bg: rgba(255, 255, 255, 0.05);
      --active-bg: rgba(88, 101, 242, 0.15);
      
      /* Theme-specific variables */
      --primary-color: #5865f2;
      --primary-rgb: 88, 101, 242;
      --input-bg: #2a304a;
      --hover-background: rgba(255, 255, 255, 0.03);
    }
    
    body {
      font-family: 'Montserrat', sans-serif;
      background-color: var(--bg-dark);
      color: var(--text-primary);
      margin: 0;
      padding: 0;
      line-height: 1.6;
    }
    
    h1, h2, h3, h4, h5, h6 {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
    }
    
    code, pre {
      font-family: 'JetBrains Mono', monospace;
    }
    
    /* Layout */
    .layout {
      display: flex;
      min-height: 100vh;
    }
    
    /* Sidebar styling */
    .sidebar {
      width: 260px;
      background-color: var(--sidebar-bg);
      color: var(--text-primary);
    }
    
    /* Nav link styles */
    .sidebar .nav-link {
      color: var(--text-secondary);
      transition: all 0.2s ease;
    }
    
    .sidebar .nav-link:hover {
      color: var(--text-primary);
      background-color: var(--hover-bg);
    }
    
    .sidebar .nav-link.active {
      color: var(--primary-color);
      background-color: var(--active-bg);
      border-left: 3px solid var(--primary-color);
    }
    
    /* User avatar for dark theme */
    .user-avatar {
      background-color: var(--primary-color);
      color: white;
    }