/* ============================================
   QÜIDA DESIGN SYSTEM - CSS Variables
   Based on Figma Design System
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  /* ===== COLORS ===== */
  
  /* Primary (Brand) */
  --primary-100: #C7D2ED;
  --primary-200: #5F7FCB;
  --primary-300: #3759A8;  /* Main brand color */
  --primary-500: #1F325E;  /* Dark brand */
  
  /* Secondary */
  --secondary-100: #A2D2EB;
  --secondary-200: #45A4D6;
  --secondary-300: #2782B1;
  
  /* Neutrals (Purple Gray) */
  --neutral-50: #FFFFFF;
  --neutral-100: #F7F5FA;
  --neutral-200: #E8E5ED;
  --neutral-300: #D4D1DB;
  --neutral-400: #A9A6B3;
  --neutral-500: #8A8695;
  --neutral-600: #6B6878;
  --neutral-700: #4D4A5A;
  --neutral-800: #2E2C3D;
  --neutral-900: #1A1825;
  
  /* Status */
  --error-200: #F87171;
  --error-500: #DC2626;
  --success-200: #4ADE80;
  --success-500: #16A34A;
  --warning-200: #FBBF24;
  --warning-500: #D97706;
  
  /* ===== TYPOGRAPHY ===== */
  --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Font Sizes */
  --text-h1: 84px;
  --text-h2: 64px;
  --text-h3: 44px;
  --text-h4: 34px;
  --text-title: 42px;
  --text-subtitle: 24px;
  --text-body: 18px;
  --text-body-sm: 16px;
  --text-button: 14px;
  --text-caption: 12px;
  
  /* Font Weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* ===== SPACING ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 120px;
  
  /* ===== RADIUS ===== */
  --radius-xs: 2px;
  --radius-s: 3px;
  --radius-m: 4px;
  --radius-l: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  
  /* ===== STROKE ===== */
  --stroke-s: 1px;
  --stroke-m: 2px;
  --stroke-l: 3px;
  
  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  
  /* ===== LAYOUT ===== */
  --container-max: 1400px;
  --container-padding: 80px;
  --container-padding-mobile: 24px;
  
  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
}

/* ===== RESPONSIVE TYPOGRAPHY ===== */
@media (max-width: 1024px) {
  :root {
    --text-h1: 56px;
    --text-h2: 44px;
    --text-h3: 32px;
    --text-h4: 26px;
    --text-title: 32px;
    --text-subtitle: 20px;
  }
}

@media (max-width: 768px) {
  :root {
    --text-h1: 40px;
    --text-h2: 32px;
    --text-h3: 26px;
    --text-h4: 22px;
    --text-title: 26px;
    --text-subtitle: 18px;
    --container-padding: var(--container-padding-mobile);
  }
}