/* ============================================================
   KR Dev X — Design Tokens (Full Premium Dashboard Variables)
   ============================================================ */

:root {
  /* ── Deep Space Base Colors ── */
  --bg-primary:          #030305;
  --bg-secondary:        #08080a;
  --bg-tertiary:         rgba(255, 255, 255, 0.02);
  --bg-card:             rgba(20, 20, 22, 0.40);

  /* ── Accent / Brand ── */
  --accent-primary:      #8B5CF6;
  --accent-primary-hover:#A78BFA;
  --accent-secondary:    #22C55E;
  --accent-danger:       #ef4444;

  /* ── Neon Glows ── */
  --accent-glow:         0 0 20px rgba(139, 92, 246, 0.4), inset 0 0 10px rgba(139, 92, 246, 0.1);
  --glass-glow:          0 8px 32px 0 rgba(0, 0, 0, 0.8);

  /* ── Text Colors ── */
  --text-primary:        #ffffff;
  --text-secondary:      #a1a1aa;
  --text-muted:          #52525b;

  /* ── Glassmorphism ── */
  --glass-bg:            rgba(10, 10, 12, 0.65);
  --glass-border:        rgba(255, 255, 255, 0.08);
  --glass-border-light:  rgba(255, 255, 255, 0.15);
  --glass-shadow:        rgba(0, 0, 0, 0.7);
  --glass-blur:          blur(24px);

  /* ── Spacing ── */
  --spacing-xs:  0.5rem;
  --spacing-sm:  1rem;
  --spacing-md:  1.5rem;
  --spacing-lg:  2rem;
  --spacing-xl:  3rem;

  /* ── Border Radius ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --transition-fast:   0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s  cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   0.5s  cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-Index Scale ── */
  --z-base:      1;
  --z-dropdown:  100;
  --z-sidebar:   100;
  --z-header:    200;
  --z-panel:     200;
  --z-overlay:   190;
  --z-modal:     9500;
  --z-toast:     9999;

  /* ── Typography ── */
  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ar:     'IBM Plex Sans Arabic', sans-serif;

  /* ── Shadows ── */
  --shadow-sm:   0 2px 8px  rgba(0, 0, 0, 0.35);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.55);
  --shadow-xl:   0 16px 50px rgba(0, 0, 0, 0.65);

  /* ── Sidebar Width ── */
  --sidebar-width: 220px;
  --taskbar-height: 56px;
}