/* ============================================================================
   DESIGN TOKENS — NaviCab
   Variables CSS pour le système de design
   ============================================================================ */

:root {
  /* ===== COULEURS ===== */
  --color-primary:        #1DD87F; /* Vert émeraude */
  --color-primary-light:  #3FE596;
  --color-primary-dark:   #0B3D2E; /* Vert foncé */
  
  --color-secondary:      #0A0A0A; /* Noir */
  --color-secondary-dark: #000000;
  --color-secondary-light:#1F2937;
  
  --color-accent:         #1DD87F;
  --color-accent-dark:    #0B3D2E;
  --color-accent-blue:    #E0EAFB; /* Badge Grand Format / PMR */
  --color-accent-mint:    #DFF7EA; /* Badge Premium/Éco */
  
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;
  --color-info:    #3B82F6;
  
  --color-bg:             #F5F5F5; /* Gris clair */
  --color-bg-alt:         #FFFFFF;
  --color-surface:        #FFFFFF; /* Blanc */
  --color-surface-alt:    #F5F5F5;
  --color-black:          #0A0A0A; 
  --color-white:          #FFFFFF;
  
  --color-text-primary:   #0A0A0A;
  --color-text-secondary: #6B7280; /* Gris texte */
  --color-text-tertiary:  #9CA3AF;
  --color-text-inverse:   #FFFFFF;
  
  --color-border:         #E5E7EB;
  --color-border-strong:  #D1D5DB;
  --color-border-focus:   #1DD87F;
  
  --glass-bg:             rgba(255, 255, 255, 0.05);
  --glass-border:         rgba(255, 255, 255, 0.1);
  
  /* ===== TYPOGRAPHIE ===== */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  
  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.25rem;   /* 20px */
  --fs-2xl:  1.5rem;    /* 24px */
  --fs-3xl:  1.875rem;  /* 30px */
  --fs-4xl:  2.25rem;   /* 36px */
  --fs-5xl:  3rem;      /* 48px */
  --fs-6xl:  3.75rem;   /* 60px */
  --fs-7xl:  4.5rem;    /* 72px */
  
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;
  --fw-black:    900;
  
  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.625;
  --lh-loose:    2;
  
  --letter-spacing-tight:  -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.025em;
  
  /* ===== ESPACEMENT (grille 8pt) ===== */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4px */
  --space-2:   0.5rem;   /* 8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */
  --space-32:  8rem;     /* 128px */
  
  /* ===== RADIUS ===== */
  --radius-sm:   0.25rem;  /* 4px */
  --radius-md:   0.5rem;   /* 8px */
  --radius-lg:   0.75rem;  /* 12px */
  --radius-xl:   1rem;     /* 16px */
  --radius-2xl:  1.5rem;   /* 24px */
  --radius-3xl:  2rem;     /* 32px */
  --radius-full: 9999px;
  
  /* ===== OMBRES ===== */
  --shadow-xs:     0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:     0 2px 4px rgba(0,0,0,0.06);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:     0 12px 24px rgba(0,0,0,0.10);
  --shadow-xl:     0 24px 48px rgba(0,0,0,0.12);
  --shadow-2xl:    0 32px 64px rgba(0,0,0,0.16);
  --shadow-glow-orange: 0 0 32px rgba(255,107,53,0.4);
  --shadow-glow-accent: 0 0 32px rgba(0,212,170,0.4);
  
  /* ===== TRANSITIONS ===== */
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
  
  --ease-linear:    linear;
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:    cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* ===== BREAKPOINTS (pour référence, utilisés dans media queries) ===== */
  /* --bp-sm:  640px; */
  /* --bp-md:  768px; */
  /* --bp-lg:  1024px; */
  /* --bp-xl:  1280px; */
  /* --bp-2xl: 1536px; */
  
  /* ===== LAYOUT ===== */
  --container-max:    1280px;
  --container-px:     var(--space-6);
  --header-height:    80px;
  --header-height-sm: 64px;
  
  /* ===== Z-INDEX ===== */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;
}

/* ===== DARK MODE (préparé pour plus tard) ===== */
@media (prefers-color-scheme: dark) {
  /* :root { ... } */
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-normal: 0ms;
    --duration-slow:   0ms;
  }
}