:root {
  /* ===== Sidebar ===== */
  --sidebar-bg:      #0B1120;
  --sidebar-bg2:     #131D35;
  --sidebar-border:  rgba(255,255,255,.06);
  --sidebar-text:    #94A3B8;
  --sidebar-active:  #FFFFFF;

  /* ===== Page ===== */
  --bg-page:   #F1F5F9;
  --bg-card:   #FFFFFF;
  --bg-topbar: #FFFFFF;

  /* ===== Border ===== */
  --border:       #E2E8F0;
  --border-hover: #CBD5E1;

  /* ===== Text ===== */
  --text:           #1E293B;
  --text-secondary: #64748B;
  --text-muted:     #94A3B8;

  /* ===== Brand / Accent ===== */
  --accent:       #6C63FF;
  --accent-hover: #5A52E0;
  --accent-light: #8B5CF6;
  --accent-bg:    rgba(108,99,255,.10);

  /* ===== Status ===== */
  --success:        #22C55E;
  --success-bg:     rgba(34,197,94,.10);
  --success-border: rgba(34,197,94,.25);

  --danger:        #EF4444;
  --danger-bg:     rgba(239,68,68,.10);
  --danger-border: rgba(239,68,68,.25);

  --warning:    #F59E0B;
  --warning-bg: rgba(245,158,11,.10);

  --info:    #06B6D4;
  --info-bg: rgba(6,182,212,.10);

  /* ===== Icon circle backgrounds ===== */
  --icon-purple: rgba(108,99,255,.12);
  --icon-green:  rgba(34,197,94,.12);
  --icon-red:    rgba(239,68,68,.12);
  --icon-orange: rgba(245,158,11,.12);
  --icon-blue:   rgba(6,182,212,.12);

  /* ===== Fonts ===== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* ===== Layout ===== */
  --sidebar-w: 220px;
  --topbar-h:  64px;

  /* ===== Radius ===== */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* ===== Shadows ===== */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.06);
  --shadow-md:   0 4px 16px rgba(0,0,0,.07);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.12);
  --shadow-card: 0 2px 8px rgba(0,0,0,.05);

  /* ===== Gradients ===== */
  --gradient-primary: linear-gradient(135deg, #6C63FF, #8B5CF6);
  --gradient-success: linear-gradient(135deg, #22C55E, #16A34A);
  --gradient-danger:  linear-gradient(135deg, #EF4444, #DC2626);
  --gradient-warning: linear-gradient(135deg, #F59E0B, #D97706);
  --gradient-info:    linear-gradient(135deg, #06B6D4, #0891B2);

  --surface2: #F8FAFC;
}