/* ============================================
   TaskFlow Design Tokens — CSS Variables
   5 Themes: Dark Obsidian, Light Ivory, Ocean Depths, Rose Gold, Cyberpunk
   ============================================ */

:root {
  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

  /* Font Sizes */
  --text-xs: clamp(0.6875rem, 0.6rem + 0.25vw, 0.75rem);
  --text-sm: clamp(0.75rem, 0.7rem + 0.3vw, 0.875rem);
  --text-base: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-lg: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  --text-xl: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --text-2xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --text-3xl: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --text-4xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.25rem);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-Index Scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-max: 999;

  /* Sidebar */
  --sidebar-width: 280px;
  --sidebar-collapsed: 72px;
  --header-height: 64px;

  /* Scrollbar */
  --scrollbar-size: 6px;
}

/* =====================
   Theme: Dark Obsidian (Default)
   ===================== */
[data-theme="dark"], :root {
  --bg-primary: #0f0f17;
  --bg-secondary: #1a1a2e;
  --bg-tertiary: #222240;
  --bg-card: #1e1e36;
  --bg-card-hover: #262650;
  --bg-input: #16162b;
  --bg-overlay: rgba(0, 0, 0, 0.6);

  --text-primary: #e8e8f0;
  --text-secondary: #a0a0c0;
  --text-tertiary: #6b6b8a;
  --text-inverse: #0f0f17;

  --border-primary: rgba(255, 255, 255, 0.08);
  --border-secondary: rgba(255, 255, 255, 0.04);
  --border-accent: rgba(124, 58, 237, 0.3);

  --accent: #7c3aed;
  --accent-hover: #6d28d9;
  --accent-light: rgba(124, 58, 237, 0.15);
  --accent-glow: rgba(124, 58, 237, 0.4);
  --accent-gradient: linear-gradient(135deg, #7c3aed, #6366f1);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --error: #f87171;
  --error-bg: rgba(248, 113, 113, 0.12);
  --info: #60a5fa;
  --info-bg: rgba(96, 165, 250, 0.12);

  --priority-critical: #ef4444;
  --priority-high: #f97316;
  --priority-medium: #eab308;
  --priority-low: #22c55e;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(124, 58, 237, 0.3);

  --glass-bg: rgba(30, 30, 54, 0.8);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-blur: 16px;

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(124, 58, 237, 0.4);
  --scrollbar-thumb-hover: rgba(124, 58, 237, 0.6);
}

/* =====================
   Theme: Light Ivory
   ===================== */
[data-theme="light"] {
  --bg-primary: #faf8f5;
  --bg-secondary: #f0ede8;
  --bg-tertiary: #e8e4dd;
  --bg-card: #ffffff;
  --bg-card-hover: #f8f6f2;
  --bg-input: #f5f3ef;
  --bg-overlay: rgba(0, 0, 0, 0.3);

  --text-primary: #1a1a2e;
  --text-secondary: #5a5a72;
  --text-tertiary: #8a8a9e;
  --text-inverse: #faf8f5;

  --border-primary: rgba(0, 0, 0, 0.1);
  --border-secondary: rgba(0, 0, 0, 0.05);
  --border-accent: rgba(99, 102, 241, 0.3);

  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-light: rgba(99, 102, 241, 0.1);
  --accent-glow: rgba(99, 102, 241, 0.2);
  --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);

  --success: #059669;
  --success-bg: rgba(5, 150, 105, 0.08);
  --warning: #d97706;
  --warning-bg: rgba(217, 119, 6, 0.08);
  --error: #dc2626;
  --error-bg: rgba(220, 38, 38, 0.08);
  --info: #2563eb;
  --info-bg: rgba(37, 99, 235, 0.08);

  --priority-critical: #dc2626;
  --priority-high: #ea580c;
  --priority-medium: #ca8a04;
  --priority-low: #16a34a;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);

  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-blur: 16px;

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(99, 102, 241, 0.3);
  --scrollbar-thumb-hover: rgba(99, 102, 241, 0.5);
}

/* =====================
   Theme: Ocean Depths
   ===================== */
[data-theme="ocean"] {
  --bg-primary: #0a192f;
  --bg-secondary: #112240;
  --bg-tertiary: #1a3358;
  --bg-card: #132e52;
  --bg-card-hover: #1a3a64;
  --bg-input: #0d1f3c;
  --bg-overlay: rgba(0, 0, 0, 0.5);

  --text-primary: #ccd6f6;
  --text-secondary: #8892b0;
  --text-tertiary: #5e6a8a;
  --text-inverse: #0a192f;

  --border-primary: rgba(100, 200, 255, 0.1);
  --border-secondary: rgba(100, 200, 255, 0.05);
  --border-accent: rgba(100, 255, 218, 0.3);

  --accent: #64ffda;
  --accent-hover: #4de8c2;
  --accent-light: rgba(100, 255, 218, 0.1);
  --accent-glow: rgba(100, 255, 218, 0.3);
  --accent-gradient: linear-gradient(135deg, #64ffda, #48c9b0);

  --success: #64ffda;
  --success-bg: rgba(100, 255, 218, 0.1);
  --warning: #ffd166;
  --warning-bg: rgba(255, 209, 102, 0.1);
  --error: #ff6b6b;
  --error-bg: rgba(255, 107, 107, 0.1);
  --info: #57b5f9;
  --info-bg: rgba(87, 181, 249, 0.1);

  --priority-critical: #ff6b6b;
  --priority-high: #ffa36b;
  --priority-medium: #ffd166;
  --priority-low: #64ffda;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(100, 255, 218, 0.2);

  --glass-bg: rgba(17, 34, 64, 0.8);
  --glass-border: rgba(100, 200, 255, 0.08);
  --glass-blur: 16px;

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(100, 255, 218, 0.3);
  --scrollbar-thumb-hover: rgba(100, 255, 218, 0.5);
}

/* =====================
   Theme: Rose Gold
   ===================== */
[data-theme="rose"] {
  --bg-primary: #1a1118;
  --bg-secondary: #2a1c26;
  --bg-tertiary: #3a2836;
  --bg-card: #2e1f2b;
  --bg-card-hover: #3d2a38;
  --bg-input: #1f1520;
  --bg-overlay: rgba(0, 0, 0, 0.5);

  --text-primary: #f5e6ef;
  --text-secondary: #c5a0b5;
  --text-tertiary: #8a6a7a;
  --text-inverse: #1a1118;

  --border-primary: rgba(245, 180, 210, 0.12);
  --border-secondary: rgba(245, 180, 210, 0.06);
  --border-accent: rgba(244, 114, 182, 0.3);

  --accent: #f472b6;
  --accent-hover: #ec4899;
  --accent-light: rgba(244, 114, 182, 0.12);
  --accent-glow: rgba(244, 114, 182, 0.3);
  --accent-gradient: linear-gradient(135deg, #f472b6, #e879a8);

  --success: #86efac;
  --success-bg: rgba(134, 239, 172, 0.1);
  --warning: #fcd34d;
  --warning-bg: rgba(252, 211, 77, 0.1);
  --error: #fca5a5;
  --error-bg: rgba(252, 165, 165, 0.1);
  --info: #93c5fd;
  --info-bg: rgba(147, 197, 253, 0.1);

  --priority-critical: #fca5a5;
  --priority-high: #fdba74;
  --priority-medium: #fcd34d;
  --priority-low: #86efac;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(244, 114, 182, 0.25);

  --glass-bg: rgba(46, 31, 43, 0.8);
  --glass-border: rgba(245, 180, 210, 0.08);
  --glass-blur: 16px;

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(244, 114, 182, 0.3);
  --scrollbar-thumb-hover: rgba(244, 114, 182, 0.5);
}

/* =====================
   Theme: Cyberpunk
   ===================== */
[data-theme="cyberpunk"] {
  --bg-primary: #0d0221;
  --bg-secondary: #1a0a3e;
  --bg-tertiary: #2a1254;
  --bg-card: #1f0b42;
  --bg-card-hover: #2c1560;
  --bg-input: #130730;
  --bg-overlay: rgba(0, 0, 0, 0.6);

  --text-primary: #e0d0ff;
  --text-secondary: #b498e0;
  --text-tertiary: #7a60a0;
  --text-inverse: #0d0221;

  --border-primary: rgba(0, 255, 255, 0.12);
  --border-secondary: rgba(0, 255, 255, 0.06);
  --border-accent: rgba(0, 255, 255, 0.3);

  --accent: #00ffff;
  --accent-hover: #00e5e5;
  --accent-light: rgba(0, 255, 255, 0.1);
  --accent-glow: rgba(0, 255, 255, 0.4);
  --accent-gradient: linear-gradient(135deg, #00ffff, #ff00ff);

  --success: #39ff14;
  --success-bg: rgba(57, 255, 20, 0.1);
  --warning: #ff6600;
  --warning-bg: rgba(255, 102, 0, 0.1);
  --error: #ff0055;
  --error-bg: rgba(255, 0, 85, 0.1);
  --info: #00ccff;
  --info-bg: rgba(0, 204, 255, 0.1);

  --priority-critical: #ff0055;
  --priority-high: #ff6600;
  --priority-medium: #ffcc00;
  --priority-low: #39ff14;

  --shadow-sm: 0 2px 8px 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-glow: 0 0 20px rgba(0, 255, 255, 0.3), 0 0 40px rgba(255, 0, 255, 0.15);

  --glass-bg: rgba(31, 11, 66, 0.85);
  --glass-border: rgba(0, 255, 255, 0.1);
  --glass-blur: 16px;

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(0, 255, 255, 0.3);
  --scrollbar-thumb-hover: rgba(0, 255, 255, 0.5);
}

/* =====================
   Theme: Midnight Blue
   ===================== */
[data-theme="midnight"] {
  --bg-primary: #0a0e27;
  --bg-secondary: #10163a;
  --bg-tertiary: #1a2150;
  --bg-card: #141b40;
  --bg-card-hover: #1d2660;
  --bg-input: #0c1230;
  --bg-overlay: rgba(0, 0, 0, 0.6);

  --text-primary: #dbeafe;
  --text-secondary: #93c5fd;
  --text-tertiary: #5b8dee;
  --text-inverse: #0a0e27;

  --border-primary: rgba(59, 130, 246, 0.15);
  --border-secondary: rgba(59, 130, 246, 0.07);
  --border-accent: rgba(59, 130, 246, 0.4);

  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-light: rgba(59, 130, 246, 0.12);
  --accent-glow: rgba(59, 130, 246, 0.35);
  --accent-gradient: linear-gradient(135deg, #3b82f6, #6366f1);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.1);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.1);
  --error: #f87171;
  --error-bg: rgba(248, 113, 113, 0.1);
  --info: #60a5fa;
  --info-bg: rgba(96, 165, 250, 0.1);

  --priority-critical: #ef4444;
  --priority-high: #f97316;
  --priority-medium: #eab308;
  --priority-low: #34d399;

  --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-glow: 0 0 20px rgba(59, 130, 246, 0.3);

  --glass-bg: rgba(20, 27, 64, 0.82);
  --glass-border: rgba(59, 130, 246, 0.1);
  --glass-blur: 16px;

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(59, 130, 246, 0.35);
  --scrollbar-thumb-hover: rgba(59, 130, 246, 0.55);
}

/* =====================
   Theme: Forest Green
   ===================== */
[data-theme="forest"] {
  --bg-primary: #0a1a0f;
  --bg-secondary: #112418;
  --bg-tertiary: #1a3424;
  --bg-card: #152e1e;
  --bg-card-hover: #1d3d28;
  --bg-input: #0c1d12;
  --bg-overlay: rgba(0, 0, 0, 0.6);

  --text-primary: #dcfce7;
  --text-secondary: #86efac;
  --text-tertiary: #4ade80;
  --text-inverse: #0a1a0f;

  --border-primary: rgba(34, 197, 94, 0.15);
  --border-secondary: rgba(34, 197, 94, 0.07);
  --border-accent: rgba(34, 197, 94, 0.35);

  --accent: #22c55e;
  --accent-hover: #16a34a;
  --accent-light: rgba(34, 197, 94, 0.12);
  --accent-glow: rgba(34, 197, 94, 0.3);
  --accent-gradient: linear-gradient(135deg, #22c55e, #16a34a);

  --success: #4ade80;
  --success-bg: rgba(74, 222, 128, 0.1);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.1);
  --error: #f87171;
  --error-bg: rgba(248, 113, 113, 0.1);
  --info: #67e8f9;
  --info-bg: rgba(103, 232, 249, 0.1);

  --priority-critical: #ef4444;
  --priority-high: #f97316;
  --priority-medium: #eab308;
  --priority-low: #4ade80;

  --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-glow: 0 0 20px rgba(34, 197, 94, 0.25);

  --glass-bg: rgba(21, 46, 30, 0.82);
  --glass-border: rgba(34, 197, 94, 0.1);
  --glass-blur: 16px;

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(34, 197, 94, 0.3);
  --scrollbar-thumb-hover: rgba(34, 197, 94, 0.5);
}

/* =====================
   Theme: Sunset Warmth
   ===================== */
[data-theme="sunset"] {
  --bg-primary: #1a0a00;
  --bg-secondary: #2a1200;
  --bg-tertiary: #3d1e07;
  --bg-card: #301700;
  --bg-card-hover: #421f00;
  --bg-input: #220e00;
  --bg-overlay: rgba(0, 0, 0, 0.6);

  --text-primary: #fff7ed;
  --text-secondary: #fdba74;
  --text-tertiary: #f97316;
  --text-inverse: #1a0a00;

  --border-primary: rgba(249, 115, 22, 0.18);
  --border-secondary: rgba(249, 115, 22, 0.08);
  --border-accent: rgba(249, 115, 22, 0.4);

  --accent: #f97316;
  --accent-hover: #ea580c;
  --accent-light: rgba(249, 115, 22, 0.15);
  --accent-glow: rgba(249, 115, 22, 0.35);
  --accent-gradient: linear-gradient(135deg, #f97316, #fcd34d);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.1);
  --warning: #fcd34d;
  --warning-bg: rgba(252, 211, 77, 0.1);
  --error: #f87171;
  --error-bg: rgba(248, 113, 113, 0.1);
  --info: #60a5fa;
  --info-bg: rgba(96, 165, 250, 0.1);

  --priority-critical: #ef4444;
  --priority-high: #f97316;
  --priority-medium: #fcd34d;
  --priority-low: #34d399;

  --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-glow: 0 0 20px rgba(249, 115, 22, 0.3);

  --glass-bg: rgba(48, 23, 0, 0.82);
  --glass-border: rgba(249, 115, 22, 0.1);
  --glass-blur: 16px;

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(249, 115, 22, 0.35);
  --scrollbar-thumb-hover: rgba(249, 115, 22, 0.55);
}

/* =====================
   Theme: Neon Night
   ===================== */
[data-theme="neon"] {
  --bg-primary: #050114;
  --bg-secondary: #0f0828;
  --bg-tertiary: #1c1040;
  --bg-card: #120c35;
  --bg-card-hover: #1e1450;
  --bg-input: #0a0620;
  --bg-overlay: rgba(0, 0, 0, 0.7);

  --text-primary: #fae8ff;
  --text-secondary: #e879f9;
  --text-tertiary: #c026d3;
  --text-inverse: #050114;

  --border-primary: rgba(217, 70, 239, 0.18);
  --border-secondary: rgba(217, 70, 239, 0.08);
  --border-accent: rgba(217, 70, 239, 0.4);

  --accent: #d946ef;
  --accent-hover: #c026d3;
  --accent-light: rgba(217, 70, 239, 0.12);
  --accent-glow: rgba(217, 70, 239, 0.4);
  --accent-gradient: linear-gradient(135deg, #d946ef, #a855f7);

  --success: #a3e635;
  --success-bg: rgba(163, 230, 53, 0.1);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.1);
  --error: #f43f5e;
  --error-bg: rgba(244, 63, 94, 0.1);
  --info: #38bdf8;
  --info-bg: rgba(56, 189, 248, 0.1);

  --priority-critical: #f43f5e;
  --priority-high: #fb923c;
  --priority-medium: #fbbf24;
  --priority-low: #a3e635;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 20px rgba(217, 70, 239, 0.4), 0 0 40px rgba(168, 85, 247, 0.2);

  --glass-bg: rgba(18, 12, 53, 0.85);
  --glass-border: rgba(217, 70, 239, 0.12);
  --glass-blur: 16px;

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(217, 70, 239, 0.35);
  --scrollbar-thumb-hover: rgba(217, 70, 239, 0.55);
}

/* =====================
   Theme: Aurora Borealis
   ===================== */
[data-theme="aurora"] {
  --bg-primary: #061020;
  --bg-secondary: #0c1e35;
  --bg-tertiary: #142d4c;
  --bg-card: #0f2540;
  --bg-card-hover: #173358;
  --bg-input: #091928;
  --bg-overlay: rgba(0, 0, 0, 0.6);

  --text-primary: #e0f2fe;
  --text-secondary: #7dd3fc;
  --text-tertiary: #38bdf8;
  --text-inverse: #061020;

  --border-primary: rgba(45, 212, 191, 0.15);
  --border-secondary: rgba(45, 212, 191, 0.07);
  --border-accent: rgba(45, 212, 191, 0.35);

  --accent: #2dd4bf;
  --accent-hover: #14b8a6;
  --accent-light: rgba(45, 212, 191, 0.12);
  --accent-glow: rgba(45, 212, 191, 0.3);
  --accent-gradient: linear-gradient(135deg, #2dd4bf, #818cf8);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.1);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.1);
  --error: #f87171;
  --error-bg: rgba(248, 113, 113, 0.1);
  --info: #818cf8;
  --info-bg: rgba(129, 140, 248, 0.1);

  --priority-critical: #f87171;
  --priority-high: #fb923c;
  --priority-medium: #fbbf24;
  --priority-low: #34d399;

  --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-glow: 0 0 20px rgba(45, 212, 191, 0.25), 0 0 40px rgba(129, 140, 248, 0.15);

  --glass-bg: rgba(15, 37, 64, 0.82);
  --glass-border: rgba(45, 212, 191, 0.1);
  --glass-blur: 16px;

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(45, 212, 191, 0.3);
  --scrollbar-thumb-hover: rgba(45, 212, 191, 0.5);
}