/* ═══════════════════════════════════════════════
   mini task ai — Design System Variables
   Purple AI Universe Theme
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Cairo:wght@400;500;600;700&display=swap');

:root {
  /* ── Backgrounds ── */
  --bg-void:         #05030F;
  --bg-base:         #0A0718;
  --bg-surface:      #110D24;
  --bg-elevated:     #1A1336;
  --bg-overlay:      #231A45;
  --bg-hover:        #2D2258;
  --bg-active:       #38297A;

  /* ── Purple Scale ── */
  --purple-50:       #F5F0FF;
  --purple-100:      #E8DCFF;
  --purple-200:      #C9B3FF;
  --purple-300:      #A87EFF;
  --purple-400:      #8B4FFF;
  --purple-500:      #7C3AED;
  --purple-600:      #6D28D9;
  --purple-700:      #5B21B6;
  --purple-800:      #4C1D95;
  --purple-900:      #2E1065;

  /* ── Accent Colors ── */
  --accent-violet:   #8B5CF6;
  --accent-indigo:   #6366F1;
  --accent-fuchsia:  #D946EF;
  --accent-cyan:     #22D3EE;
  --accent-emerald:  #10B981;
  --accent-amber:    #F59E0B;
  --accent-rose:     #F43F5E;

  /* ── Glow Effects ── */
  --glow-purple:     0 0 20px rgba(124, 58, 237, 0.4),
                     0 0 60px rgba(124, 58, 237, 0.15);
  --glow-fuchsia:    0 0 20px rgba(217, 70, 239, 0.4),
                     0 0 60px rgba(217, 70, 239, 0.1);
  --glow-cyan:       0 0 20px rgba(34, 211, 238, 0.35),
                     0 0 40px rgba(34, 211, 238, 0.1);
  --glow-soft:       0 4px 24px rgba(124, 58, 237, 0.25);

  /* ── Text Colors ── */
  --text-primary:    #F0EAFF;
  --text-secondary:  #A89BC2;
  --text-muted:      #6B5C8A;
  --text-disabled:   #3D3360;
  --text-inverse:    #05030F;

  /* ── Borders ── */
  --border-subtle:   rgba(124, 58, 237, 0.12);
  --border-default:  rgba(124, 58, 237, 0.25);
  --border-strong:   rgba(124, 58, 237, 0.5);
  --border-glow:     rgba(139, 92, 246, 0.8);

  /* ── Gradients ── */
  --gradient-primary:  linear-gradient(135deg, #7C3AED 0%, #6366F1 50%, #8B5CF6 100%);
  --gradient-hero:     linear-gradient(135deg, #4C1D95 0%, #2E1065 40%, #1a0533 100%);
  --gradient-card:     linear-gradient(145deg, #1A1336 0%, #110D24 100%);
  --gradient-glow:     radial-gradient(ellipse at center, rgba(124,58,237,0.3) 0%, transparent 70%);
  --gradient-aurora:   linear-gradient(135deg, #7C3AED, #D946EF, #6366F1, #22D3EE);
  --gradient-text:     linear-gradient(135deg, #A87EFF 0%, #D946EF 50%, #22D3EE 100%);
  --gradient-surface:  linear-gradient(180deg, rgba(26,19,54,0.95) 0%, rgba(10,7,24,0.98) 100%);

  /* ── Radii ── */
  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       16px;
  --radius-xl:       24px;
  --radius-2xl:      32px;
  --radius-pill:     9999px;

  /* ── Shadows ── */
  --shadow-sm:       0 1px 4px rgba(0,0,0,0.4);
  --shadow-md:       0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:       0 8px 32px rgba(0,0,0,0.6);
  --shadow-card:     0 2px 12px rgba(0,0,0,0.4), 0 0 0 1px var(--border-subtle);
  --shadow-elevated: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px var(--border-default);

  /* ── Motion ── */
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   350ms;
  --duration-enter:  500ms;

  /* ── Spacing ── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* ── Typography ── */
  --font-display:  'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:     'Inter', 'DM Sans', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;
  --font-arabic:   'Cairo', 'Tajawal', system-ui, sans-serif;

  /* ── Font Sizes ── */
  --text-xs:   11px;  --text-sm:   13px;  --text-base: 14px;
  --text-md:   15px;  --text-lg:   16px;  --text-xl:   18px;
  --text-2xl:  22px;  --text-3xl:  28px;  --text-4xl:  36px;

  /* ── Layout ── */
  --sidebar-width:          260px;
  --sidebar-width-collapsed: 68px;
  --header-height:          60px;
  --panel-width:            340px;

  /* ── Priority Colors ── */
  --priority-critical: #EF4444;
  --priority-critical-bg: rgba(239, 68, 68, 0.12);
  --priority-high: #F97316;
  --priority-high-bg: rgba(249, 115, 22, 0.12);
  --priority-medium: #EAB308;
  --priority-medium-bg: rgba(234, 179, 8, 0.12);
  --priority-low: #22C55E;
  --priority-low-bg: rgba(34, 197, 94, 0.12);
  --priority-none: var(--text-muted);

  /* ── Status Colors ── */
  --status-backlog: var(--text-muted);
  --status-todo: var(--accent-indigo);
  --status-progress: var(--accent-amber);
  --status-review: var(--accent-cyan);
  --status-done: var(--accent-emerald);
  --status-cancelled: var(--accent-rose);
  --status-hold: var(--text-secondary);
}