/* ============================================
   Admin Theme — Dark / Light CSS Variables
   ============================================ */

/* ===== LIGHT THEME (Default) ===== */
:root, [data-theme="light"] {
  --font-ar: 'Cairo', 'Segoe UI', sans-serif;

  /* Primary */
  --primary: #4A3AFF;
  --primary-hover: #3D2FE0;
  --primary-soft: rgba(74, 58, 255, 0.08);
  --primary-shadow: rgba(74, 58, 255, 0.25);

  /* Accent Colors */
  --green: #22C55E;
  --green-soft: rgba(34,197,94,0.1);
  --orange: #F59E0B;
  --orange-soft: rgba(245,158,11,0.1);
  --red: #EF4444;
  --red-soft: rgba(239,68,68,0.1);
  --cyan: #06B6D4;
  --cyan-soft: rgba(6,182,212,0.1);

  /* Gradients */
  --grad-purple: linear-gradient(135deg, #6366F1, #4A3AFF);
  --grad-blue: linear-gradient(135deg, #3B82F6, #1D4ED8);
  --grad-teal: linear-gradient(135deg, #14B8A6, #0D9488);
  --grad-rose: linear-gradient(135deg, #F43F5E, #E11D48);

  /* Surfaces */
  --bg: #F4F6FB;
  --bg-card: #FFFFFF;
  --bg-sidebar: #FFFFFF;
  --bg-navbar: #FFFFFF;
  --bg-input: #F4F6FB;
  --bg-hover: #F8F9FC;

  /* Text */
  --text-1: #1E293B;
  --text-2: #475569;
  --text-3: #94A3B8;

  /* Lines & Borders */
  --border: #E8ECF4;
  --border-hover: #CBD5E1;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.07);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.1);

  /* Sidebar Specific */
  --sidebar-active-bg: var(--primary);
  --sidebar-active-text: #FFFFFF;
  --sidebar-active-shadow: 0 4px 12px var(--primary-shadow);
  --sidebar-section-text: var(--text-3);

  /* Scrollbar */
  --scrollbar-thumb: #CBD5E1;
  --scrollbar-track: transparent;

  /* Theme Toggle */
  --toggle-bg: #E8ECF4;
  --toggle-knob: #FFFFFF;
  --toggle-icon: var(--text-3);
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  /* Primary */
  --primary: #7C6FFF;
  --primary-hover: #6C5FFF;
  --primary-soft: rgba(124, 111, 255, 0.12);
  --primary-shadow: rgba(124, 111, 255, 0.3);

  /* Accent Colors */
  --green: #4ADE80;
  --green-soft: rgba(74,222,128,0.12);
  --orange: #FBBF24;
  --orange-soft: rgba(251,191,36,0.12);
  --red: #F87171;
  --red-soft: rgba(248,113,113,0.12);
  --cyan: #22D3EE;
  --cyan-soft: rgba(34,211,238,0.12);

  /* Gradients */
  --grad-purple: linear-gradient(135deg, #7C6FFF, #5B4FE8);
  --grad-blue: linear-gradient(135deg, #60A5FA, #3B82F6);
  --grad-teal: linear-gradient(135deg, #2DD4BF, #14B8A6);
  --grad-rose: linear-gradient(135deg, #FB7185, #F43F5E);

  /* Surfaces */
  --bg: #0B1120;
  --bg-card: #111827;
  --bg-sidebar: #0F172A;
  --bg-navbar: #0F172A;
  --bg-input: #1E293B;
  --bg-hover: #1E293B;

  /* Text */
  --text-1: #F1F5F9;
  --text-2: #94A3B8;
  --text-3: #64748B;

  /* Lines */
  --border: #1E293B;
  --border-hover: #334155;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.6);

  /* Sidebar */
  --sidebar-active-bg: var(--primary);
  --sidebar-active-text: #FFFFFF;
  --sidebar-active-shadow: 0 4px 12px var(--primary-shadow);
  --sidebar-section-text: var(--text-3);

  /* Scrollbar */
  --scrollbar-thumb: #334155;

  /* Theme Toggle */
  --toggle-bg: #1E293B;
  --toggle-knob: #FBBF24;
  --toggle-icon: #FBBF24;
}