/* ========================================
   FASTAP - Clean Modern Design System
   Design Variables & Theme Configuration
   ======================================== */

:root {
  /* ============= LIGHT THEME (DEFAULT) ============= */

  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #f1f3f5;
  --bg-accent: #e9ecef;

  /* Text Colors */
  --text-primary: #1a1a2e;
  --text-secondary: #4a5568;
  --text-muted: #718096;
  --text-white: #ffffff;

  /* Border Colors */
  --border-light: #e2e8f0;
  --border-medium: #cbd5e0;
  --border-dark: #a0aec0;

  /* Shadow Colors */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);

  /* Gradient Accent Colors - Multi-color Theme */
  --purple-500: #7c3aed;
  --purple-600: #6d28d9;
  --purple-400: #a855f7;
  --purple-300: #c084fc;

  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-400: #60a5fa;

  --pink-500: #ec4899;
  --pink-600: #db2777;
  --pink-400: #f472b6;

  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-400: #fb923c;

  --green-500: #10b981;
  --green-600: #059669;

  /* Primary Gradients */
  --gradient-purple: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  --gradient-blue: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  --gradient-pink: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
  --gradient-orange: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  --gradient-multi: linear-gradient(135deg, #7c3aed 0%, #ec4899 50%, #f97316 100%);
  --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* Card Backgrounds */
  --card-bg: #ffffff;
  --card-hover-bg: #f8f9fa;
  --card-border: #e2e8f0;

  /* Button Colors */
  --btn-primary-bg: var(--gradient-purple);
  --btn-primary-color: #ffffff;
  --btn-secondary-bg: #f1f3f5;
  --btn-secondary-color: #1a1a2e;
  --btn-outline-border: #7c3aed;
  --btn-outline-color: #7c3aed;

  /* Header */
  --header-bg: rgba(255, 255, 255, 0.95);
  --header-border: rgba(226, 232, 240, 0.8);
  --header-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

  /* ============= SPACING ============= */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 3rem;      /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 6rem;     /* 96px */

  /* ============= TYPOGRAPHY ============= */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* ============= BORDER RADIUS ============= */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 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);

  /* ============= Z-INDEX ============= */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ============= DARK THEME ============= */
[data-theme="dark"] {
  /* Background Colors */
  --bg-primary: #0f0f1e;
  --bg-secondary: #1a1a2e;
  --bg-tertiary: #252538;
  --bg-accent: #2d2d44;

  /* Text Colors */
  --text-primary: #f7fafc;
  --text-secondary: #cbd5e0;
  --text-muted: #a0aec0;
  --text-white: #ffffff;

  /* Border Colors */
  --border-light: #2d3748;
  --border-medium: #4a5568;
  --border-dark: #718096;

  /* Shadow Colors - Enhanced for dark mode */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);

  /* Dark Mode Purple Accents - Brighter for better contrast */
  --purple-500: #a78bfa;
  --purple-600: #9333ea;
  --purple-400: #c4b5fd;
  --purple-300: #ddd6fe;

  /* Dark Mode Blue Accents */
  --blue-500: #60a5fa;
  --blue-600: #3b82f6;
  --blue-400: #93c5fd;

  /* Dark Mode Pink Accents */
  --pink-500: #f472b6;
  --pink-600: #ec4899;
  --pink-400: #f9a8d4;

  /* Dark Mode Orange Accents */
  --orange-500: #fb923c;
  --orange-600: #f97316;
  --orange-400: #fdba74;

  /* Dark Mode Gradients - Brighter and more vibrant */
  --gradient-purple: linear-gradient(135deg, #9333ea 0%, #c4b5fd 100%);
  --gradient-blue: linear-gradient(135deg, #3b82f6 0%, #93c5fd 100%);
  --gradient-pink: linear-gradient(135deg, #ec4899 0%, #f9a8d4 100%);
  --gradient-orange: linear-gradient(135deg, #f97316 0%, #fdba74 100%);
  --gradient-multi: linear-gradient(135deg, #9333ea 0%, #ec4899 50%, #fb923c 100%);
  --gradient-hero: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);

  /* Card Backgrounds */
  --card-bg: #1a1a2e;
  --card-hover-bg: #252538;
  --card-border: #2d3748;

  /* Button Colors */
  --btn-secondary-bg: #2d2d44;
  --btn-secondary-color: #f7fafc;
  --btn-outline-border: #a78bfa;
  --btn-outline-color: #a78bfa;

  /* Header */
  --header-bg: rgba(26, 26, 46, 0.95);
  --header-border: rgba(45, 55, 72, 0.8);
  --header-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* ============= UTILITY CLASSES ============= */

/* Background Gradients */
.gradient-purple { background: var(--gradient-purple); }
.gradient-blue { background: var(--gradient-blue); }
.gradient-pink { background: var(--gradient-pink); }
.gradient-orange { background: var(--gradient-orange); }
.gradient-multi { background: var(--gradient-multi); }
.gradient-hero { background: var(--gradient-hero); }

/* Text Gradients */
.text-gradient-purple {
  background: var(--gradient-purple);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-multi {
  background: var(--gradient-multi);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Hover Shadow Effects */
.hover-shadow-md:hover { box-shadow: var(--shadow-md); }
.hover-shadow-lg:hover { box-shadow: var(--shadow-lg); }
.hover-shadow-xl:hover { box-shadow: var(--shadow-xl); }

/* Transitions */
.transition-fast { transition: all var(--transition-fast); }
.transition-base { transition: all var(--transition-base); }
.transition-slow { transition: all var(--transition-slow); }