/**
 * Design System - Camping-Car Partner
 * Variables CSS pour un design minimaliste et professionnel
 * Version 4.0 - UX/UI Expert Edition
 */

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

:root {
  /* ═══════════════════════════════════════════
     COULEURS - Palette sophistiquée
     ═══════════════════════════════════════════ */
  
  /* Base */
  --color-white: #FFFFFF;
  --color-black: #0D0D0D;
  
  /* Neutres - Gamme riche et chaude */
  --color-gray-25: #FCFCFD;
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;
  --color-gray-950: #0A0D14;
  
  /* Accent Principal - Vert Nature Raffiné */
  --color-accent-50: #EFFDF4;
  --color-accent-100: #D9FBE8;
  --color-accent-200: #B5F5D1;
  --color-accent-300: #7EEBB3;
  --color-accent-400: #42D88E;
  --color-accent-500: #1CB86A;
  --color-accent: #1A7B4B;
  --color-accent-light: #239B5F;
  --color-accent-dark: #145F3A;
  --color-accent-700: #145F3A;
  --color-accent-800: #12492D;
  --color-accent-900: #0E3622;
  --color-accent-muted: rgba(26, 123, 75, 0.08);
  --color-accent-subtle: rgba(26, 123, 75, 0.04);
  
  /* Sémantiques */
  --color-success: #10B981;
  --color-success-light: #D1FAE5;
  --color-success-bg: rgba(16, 185, 129, 0.08);
  --color-warning: #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-warning-bg: rgba(245, 158, 11, 0.1);
  --color-error: #EF4444;
  --color-error-light: #FEE2E2;
  --color-error-bg: rgba(239, 68, 68, 0.08);
  --color-info: #3B82F6;
  --color-info-light: #DBEAFE;
  --color-info-bg: rgba(59, 130, 246, 0.08);

  /* ═══════════════════════════════════════════
     TYPOGRAPHIE - Plus Jakarta Sans
     ═══════════════════════════════════════════ */
  
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;
  
  /* Échelle de tailles */
  --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;
  --text-8xl: 6rem;
  
  /* Poids */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Hauteurs de ligne */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 2;
  
  /* Espacement lettres */
  --tracking-tighter: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.04em;
  --tracking-widest: 0.08em;

  /* ═══════════════════════════════════════════
     ESPACEMENTS - Système 8pt
     ═══════════════════════════════════════════ */
  
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-36: 9rem;
  --space-40: 10rem;
  --space-48: 12rem;
  --space-56: 14rem;
  --space-64: 16rem;

  /* ═══════════════════════════════════════════
     RAYONS DE BORDURE
     ═══════════════════════════════════════════ */
  
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-default: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-full: 9999px;

  /* ═══════════════════════════════════════════
     OMBRES - Subtiles et élégantes
     ═══════════════════════════════════════════ */
  
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, 0.1), 0 8px 16px -4px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 32px 64px -12px rgba(0, 0, 0, 0.14);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-accent: 0 8px 24px -4px rgba(26, 123, 75, 0.25);
  --shadow-accent-lg: 0 16px 40px -8px rgba(26, 123, 75, 0.3);

  /* ═══════════════════════════════════════════
     TRANSITIONS & ANIMATIONS
     ═══════════════════════════════════════════ */
  
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* ═══════════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════════ */
  
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1400px;
  
  --navbar-height: 72px;
  --navbar-height-mobile: 64px;

  /* ═══════════════════════════════════════════
     TYPOGRAPHIE SÉMANTIQUE (fluid)
     Hiérarchie claire : display > h1 > h2 > h3 > body
     ═══════════════════════════════════════════ */
  
  --heading-display: clamp(2.5rem, 7vw, 4.5rem);     /* Hero : 40 → 72px */
  --heading-1: clamp(1.75rem, 4.5vw, 3rem);           /* Section title : 28 → 48px */
  --heading-2: clamp(1.375rem, 3vw, 2rem);            /* Sub-section : 22 → 32px */
  --heading-3: clamp(1.125rem, 2vw, 1.375rem);        /* Card title : 18 → 22px */
  --heading-4: clamp(1rem, 1.5vw, 1.125rem);          /* Small heading : 16 → 18px */

  --body-lg: clamp(1rem, 1.4vw, 1.25rem);             /* Grand body : 16 → 20px */
  --body-base: 1rem;                                    /* Body standard : 16px */
  --body-sm: 0.875rem;                                  /* Petit body : 14px */
  --body-xs: 0.75rem;                                   /* Très petit : 12px */

  /* ═══════════════════════════════════════════
     Z-INDEX
     ═══════════════════════════════════════════ */
  
  --z-below: -1;
  --z-base: 0;
  --z-above: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-toast: 800;
  --z-max: 9999;
}