/* CSS Variables for MwEA Software Company Website */

:root {
  /* Colors - Brand Gradients */
  --orange-50: #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;

  /* Gradients */
  --gradient-brand: linear-gradient(to right, #ea580c, #16a34a);
  --gradient-orange: linear-gradient(to right, #f97316, #ea580c);
  --gradient-green: linear-gradient(to right, #22c55e, #16a34a);
  --gradient-blue-cyan: linear-gradient(to right, #3b82f6, #06b6d4);
  --gradient-purple-pink: linear-gradient(to right, #a855f7, #ec4899);
  --gradient-purple-indigo: linear-gradient(to right, #9333ea, #4f46e5);

  /* Neutral Colors */
  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --black: #000000;

  /* Package Gradient Colors */
  --gradient-blue-cyan: linear-gradient(to right, #3b82f6, #06b6d4);
  --gradient-purple-pink: linear-gradient(to right, #a855f7, #ec4899);
  --gradient-orange-red: linear-gradient(to right, #f97316, #ef4444);
  --gradient-teal-green: linear-gradient(to right, #14b8a6, #22c55e);
  --gradient-indigo-purple: linear-gradient(to right, #6366f1, #a855f7);
  --gradient-green-emerald: linear-gradient(to right, #22c55e, #10b981);
  --gradient-blue-indigo: linear-gradient(to right, #2563eb, #4f46e5);
  --gradient-yellow-orange: linear-gradient(to right, #eab308, #f97316);
  --gradient-red-pink: linear-gradient(to right, #ef4444, #ec4899);
  --gradient-purple-indigo-deep: linear-gradient(to right, #9333ea, #4f46e5);

  /* Spacing Scale */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;

  /* Border Radius */
  --rounded-sm: 0.125rem;
  --rounded-md: 0.375rem;
  --rounded-lg: 0.5rem;
  --rounded-xl: 0.75rem;
  --rounded-2xl: 1rem;
  --rounded-3xl: 1.5rem;
  --rounded-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-orange: 0 10px 30px -5px rgba(249, 115, 22, 0.4);
  --shadow-green: 0 10px 30px -5px rgba(34, 197, 94, 0.4);

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;

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

  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* Header Heights */
  --header-top-bar: 32px;
  --header-main: 72px;
  --header-total: calc(var(--header-top-bar) + var(--header-main));
}