/* ═══════════════════════════════════════════════════════════
   IAfluence Design System — Design Tokens
   Source unique de vérité pour toutes les pages
   Inspiré Stripe × Mistral AI, adapté à l'identité IAfluence
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Palette Principale ────────────────────────────── */
  --color-primary:          #007BFF;
  --color-primary-dark:     #0056b3;
  --color-primary-light:    #e3f2fd;
  --color-primary-hover:    #0069d9;

  --color-accent:           #10b981;
  --color-accent-dark:      #059669;
  --color-accent-light:     #d1fae5;
  --color-accent-hover:     #059669;

  --gradient-hero:          linear-gradient(135deg, #007BFF 0%, #10b981 100%);
  --gradient-hero-alt:      linear-gradient(135deg, #0056b3 0%, #059669 100%);
  --gradient-header:        linear-gradient(135deg, #007BFF 0%, #10b981 100%);

  /* ── Neutres ──────────────────────────────────────── */
  --color-white:            #ffffff;
  --color-bg:               #f9fafb;
  --color-bg-alt:           #f3f4f6;
  --color-bg-card:          #ffffff;
  --color-bg-dark:          #111827;
  --color-bg-hero:          #f0f7ff;

  --color-border:           #e5e7eb;
  --color-border-light:     #f3f4f6;
  --color-border-dark:      #d1d5db;

  /* ── Texte ─────────────────────────────────────────── */
  --color-text:             #111827;
  --color-text-secondary:   #6b7280;
  --color-text-muted:       #9ca3af;
  --color-text-inverse:     #ffffff;
  --color-text-link:        var(--color-primary);
  --color-text-link-hover:  var(--color-primary-dark);

  /* ── États ─────────────────────────────────────────── */
  --color-success:          #10b981;
  --color-warning:          #f59e0b;
  --color-error:            #ef4444;
  --color-info:             #3b82f6;

  /* ── Typographie ───────────────────────────────────── */
  --font-body:              'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading:           'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:              'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Tailles de corps */
  --text-xs:                0.75rem;    /* 12px */
  --text-sm:                0.875rem;   /* 14px */
  --text-base:              1rem;       /* 16px */
  --text-lg:                1.125rem;   /* 18px */
  --text-xl:                1.25rem;    /* 20px */

  /* Tailles de titres */
  --heading-1:              3.5rem;     /* 56px */
  --heading-2:              2.75rem;    /* 44px */
  --heading-3:              2rem;       /* 32px */
  --heading-4:              1.5rem;     /* 24px */
  --heading-5:              1.25rem;    /* 20px */

  /* Poids */
  --weight-normal:          400;
  --weight-medium:          500;
  --weight-semibold:        600;
  --weight-bold:            700;

  /* Hauteurs de ligne */
  --leading-tight:          1.25;
  --leading-normal:         1.6;
  --leading-relaxed:        1.75;

  /* ── Espacements (échelle 4px) ───────────────────── */
  --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 */

  /* ── Layout ────────────────────────────────────────── */
  --container-max:          1200px;
  --container-narrow:       800px;
  --container-padding:      var(--space-4);
  --header-height:          78px;

  /* ── Border Radius ─────────────────────────────────── */
  --radius-sm:              0.375rem;   /* 6px */
  --radius-md:              0.5rem;     /* 8px */
  --radius-lg:              0.75rem;    /* 12px */
  --radius-xl:              1rem;       /* 16px */
  --radius-2xl:             1.5rem;     /* 24px */
  --radius-full:            9999px;

  /* ── Ombres ────────────────────────────────────────── */
  --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);
  --shadow-card:            0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
  --shadow-card-hover:      0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-header:          0 1px 3px rgba(0, 0, 0, 0.08);

  /* ── Transitions ───────────────────────────────────── */
  --transition-fast:        150ms ease;
  --transition-base:        250ms ease;
  --transition-slow:        400ms ease;
  --transition-spring:      300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index ───────────────────────────────────────── */
  --z-header:               100;
  --z-mobile-menu:          40;
  --z-chatbot:              1000;
  --z-overlay:              900;
}

/* ── Dark mode (préparé pour plus tard) ──────────── */
@media (prefers-color-scheme: dark) {
  :root {
    /* À déployer ultérieurement */
  }
}