/* ================================================
   SIBHOST WHMCS THEME — Design Tokens
   variables.css
   ================================================ */

/* ─── Brand Colors ─── */
:root {
  --brand-blue:       #2563EB;
  --brand-cyan:       #06B6D4;
  --brand-blue-light: #3B82F6;
  --brand-cyan-light: #22D3EE;
  --brand-purple:     #8B5CF6;
  --brand-pink:       #EC4899;
}

/* ─── Dark Mode (default) ─── */
[data-theme="dark"] {
  --bg-root:        #060B18;
  --bg-surface:     #0A1628;
  --bg-card:        rgba(255,255,255,0.04);
  --bg-card-hover:  rgba(255,255,255,0.07);

  --border-soft:    rgba(99,179,237,0.12);
  --border-medium:  rgba(99,179,237,0.25);
  --border-strong:  rgba(99,179,237,0.40);

  --text-primary:   #F0F6FF;
  --text-secondary: #8BA8CC;
  --text-muted:     #4A6A8A;

  --sidebar-bg:     rgba(10,22,40,0.85);
  --topbar-bg:      rgba(6,11,24,0.80);
  --track-bg:       rgba(255,255,255,0.08);

  --logo-filter:    none;
}

/* ─── Light Mode ─── */
[data-theme="light"] {
  --bg-root:        #F0F5FF;
  --bg-surface:     #FFFFFF;
  --bg-card:        rgba(255,255,255,0.80);
  --bg-card-hover:  rgba(255,255,255,0.95);

  --border-soft:    rgba(37,99,235,0.10);
  --border-medium:  rgba(37,99,235,0.20);
  --border-strong:  rgba(37,99,235,0.35);

  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-muted:     #94A3B8;

  --sidebar-bg:     rgba(255,255,255,0.90);
  --topbar-bg:      rgba(240,245,255,0.85);
  --track-bg:       rgba(0,0,0,0.09);

  --logo-filter:    brightness(0) saturate(100%)
                    invert(28%) sepia(89%)
                    saturate(1652%) hue-rotate(211deg);
}

/* ─── Status Colors (ثابت در هر دو حالت) ─── */
:root {
  --success:  #10B981;
  --warning:  #F59E0B;
  --danger:   #EF4444;
  --info:     #06B6D4;

  --success-bg: rgba(16,185,129,0.12);
  --warning-bg: rgba(245,158,11,0.12);
  --danger-bg:  rgba(239,68,68,0.12);
  --info-bg:    rgba(6,182,212,0.12);
}

/* ─── Typography ─── */
:root {
  --font-main: 'Vazirmatn', sans-serif;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;

  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold:800;
}

/* ─── Spacing ─── */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
}

/* ─── Border Radius ─── */
:root {
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  18px;
  --radius-2xl: 24px;
  --radius-full:9999px;
}

/* ─── Shadows ─── */
:root {
  --shadow-card:  0 4px 24px rgba(0,0,0,0.15);
  --shadow-glow-blue: 0 0 20px rgba(37,99,235,0.25);
  --shadow-glow-cyan: 0 0 20px rgba(6,182,212,0.25);
}

/* ─── Layout ─── */
:root {
  --sidebar-width: 260px;
  --topbar-height: 64px;
}

/* ─── Transitions ─── */
:root {
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;
}

/* ─── Glassmorphism ─── */
:root {
  --glass-blur:   blur(16px);
  --glass-blur-sm:blur(8px);
}