/* ============================================
   AgileVizion 2 — Design Tokens
   Palette moderne, abandon navy/gold
   ============================================ */

:root {
    /* Primary — Deep Indigo/Violet */
    --color-primary: #4F46E5;
    --color-primary-light: #6366F1;
    --color-primary-dark: #3730A3;
    --color-primary-50: #EEF2FF;
    --color-primary-100: #E0E7FF;
    --color-primary-900: #312E81;

    /* Accent — Emerald */
    --color-accent: #10B981;
    --color-accent-light: #34D399;
    --color-accent-dark: #059669;

    /* Alert / Danger */
    --color-danger: #EF4444;
    --color-danger-light: #FEE2E2;
    --color-warning: #F59E0B;
    --color-warning-light: #FEF3C7;

    /* Neutrals */
    --color-white: #FFFFFF;
    --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;

    /* Text */
    --text-primary: var(--color-gray-900);
    --text-secondary: var(--color-gray-600);
    --text-muted: var(--color-gray-400);
    --text-inverse: var(--color-white);

    /* Backgrounds */
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-gray-50);
    --bg-dark: var(--color-gray-900);

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;       /* 16px — minimum pour éviter zoom auto iOS */
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.5rem;      /* mobile base — scale up via min-width queries */
    --font-size-4xl: 2rem;        /* mobile base */
    --font-size-5xl: 1.875rem;    /* mobile base — scale up via min-width queries */
    --font-size-6xl: 2.5rem;      /* mobile base */
    --line-height-tight: 1.15;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.75;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

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

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

    /* Shadows */
    --shadow-sm: 0 1px 2px 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);
    --shadow-banner: 0 -4px 20px rgba(0, 0, 0, 0.3);

    /* White alpha variants (overlays sur fond sombre) */
    --color-white-08: rgba(255, 255, 255, 0.08);
    --color-white-15: rgba(255, 255, 255, 0.15);
    --color-white-25: rgba(255, 255, 255, 0.25);
    --color-white-30: rgba(255, 255, 255, 0.30);
    --color-white-40: rgba(255, 255, 255, 0.40);
    --color-white-50: rgba(255, 255, 255, 0.50);
    --color-white-60: rgba(255, 255, 255, 0.60);
    --color-white-85: rgba(255, 255, 255, 0.85);
    --color-white-90: rgba(255, 255, 255, 0.90);
    --color-white-95: rgba(255, 255, 255, 0.95);

    /* Accent clair */
    --color-accent-50: #D1FAE5;

    /* Backgrounds sémantiques */
    --bg-navbar: rgba(255, 255, 255, 0.95);
    --bg-cookie: rgba(15, 15, 25, 0.92);

    /* Line heights supplémentaires */
    --line-height-snug: 1.5;
    --line-height-button: 1.4;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    --transition-enter: 600ms ease-out;  /* animations scroll Intersection Observer */

    /* Layout */
    --container-max: 1200px;
    --container-padding: var(--space-6);
    --navbar-height: 72px;

    /* Icon / component sizes */
    --size-icon-inline: 0.75rem;   /* 12px — icône inline (norm-detail, select arrow) */
    --size-icon-md: 3rem;          /* 48px — step numbers, why icons */
    --size-icon-lg: 3.5rem;        /* 56px — service icons */
    --size-icon-play: 4.5rem;      /* 72px — bouton play vidéo */
    --size-hamburger: 1.5rem;      /* 24px — barre hamburger nav */
    --tap-target: 44px;            /* Tap target minimum accessibilité tactile */

    /* Layout max-widths */
    --width-hero-content: 800px;
    --width-text-block: 640px;
    --width-cta-max: 320px;
    --width-video-max: 720px;
    --width-simulator-max: 820px;

    /* Photo portrait dimensions */
    --photo-sm: 160px;
    --photo-height-sm: 200px;
    --photo-md: 200px;
    --photo-height-md: 250px;
    --photo-lg: 220px;
    --photo-height-lg: 280px;

    /* Why-profile grid column sizes */
    --col-photo-md: 200px;
    --col-photo-lg: 260px;

    /* UI micro-values */
    --border-2: 2px;               /* Épaisseur bordure fine (btn, nav active, hamburger) */
    --select-arrow-offset: 2.25rem; /* 36px — padding-right décalage flèche select */
    --risk-label-min: 3.125rem;    /* 50px — min-width label risque */
    --offset-icon: 2px;            /* Alignement vertical micro icône inline */
    --offset-icon-xs: 1px;         /* Alignement vertical fin (1px) */

    /* Transitions supplémentaires */
    --transition-exit: 300ms ease-out;  /* Slide-out bannière cookies, collapse */
    --transition-reveal: 400ms ease;    /* Reveal cards (profile, results) */

    /* Staggered animation delays */
    --delay-nth-2: 0.1s;
    --delay-nth-3: 0.2s;
    --delay-nth-4: 0.3s;
    --delay-nth-5: 0.35s;
    --delay-nth-6: 0.4s;
    --delay-nth-7: 0.45s;

    /* Animation */
    --duration-spin: 600ms;
    --easing-linear: linear;

    /* Hauteur max groupe conditionnel simulateur */
    --height-conditional-max: 300px;
}