/**
 * Wiisé Design System — Design Tokens
 * Architecture à 3 couches : primitif → sémantique → composant.
 *
 * Ce fichier est la source de vérité pour tout nouveau travail CSS sur le
 * site vitrine. Les anciens tokens plats de styles.css (--primary,
 * --text-primary, --radius-md, etc.) restent en place pour ne rien casser
 * dans les ~2900 lignes existantes, mais pointent vers les MÊMES valeurs
 * que les tokens sémantiques ci-dessous : il n'y a qu'une seule vérité de
 * couleur, juste deux façons d'y accéder pendant la transition.
 *
 * Chargé AVANT styles.css dans index.html, payment-failed.html et
 * payment-success.html.
 */

:root {
  /* ======================================================
     COUCHE 1 — PRIMITIFS (valeurs brutes, sans signification)
     ====================================================== */

  /* Vert Wiisé — couleur de marque, du plus clair au plus sombre */
  --color-green-50:  #F0FDF4;
  --color-green-100: #DCFCE7;
  --color-green-200: #BBF7D0;
  --color-green-400: #4A7C23;
  --color-green-500: #22C55E;
  --color-green-700: #2D5016;
  --color-green-900: #1E3A0F;

  /* Neutres */
  --color-gray-50:  #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;
  --color-white:    #FFFFFF;

  /* Couleurs d'accent des niveaux de tarification. Les variantes 700 servent au texte
     (ratio >= 4.5:1 sur blanc), les 200 aux bordures douces, les 50 aux survols. */
  --color-blue-700:   #1D4ED8;
  --color-blue-600:   #2563EB;
  --color-blue-200:   #BFDBFE;
  --color-blue-100:   #DBEAFE;
  --color-blue-50:    #EFF6FF;
  --color-teal-700:   #0F766E;
  --color-teal-600:   #0D9488;
  --color-teal-200:   #99F6E4;
  --color-teal-100:   #CCFBF1;
  --color-teal-50:    #F0FDFA;
  --color-amber-600:  #D97706;
  --color-amber-400:  #FBBF24;
  --color-amber-100:  #FEF3C7;
  --color-purple-700: #6D28D9;
  --color-purple-600: #7C3AED;
  --color-purple-200: #DDD6FE;
  --color-purple-100: #EDE9FE;
  --color-purple-50:  #F5F3FF;
  --color-green-300:  #86EFAC;
  --color-red-600:    #DC2626;

  /* Typographie */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */
  --font-size-3xl:  2rem;      /* 32px */
  --font-size-4xl:  2.5rem;    /* 40px */
  --font-size-5xl:  3.5rem;    /* 56px, titre du hero */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extra:    800;

  /* Espacement (base 4px, suit la grille déjà utilisée dans styles.css) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-24: 6rem;    /* 96px, padding vertical standard d'une section */

  /* Rayons */
  --radius-100: 8px;
  --radius-200: 12px;
  --radius-300: 16px;
  --radius-400: 24px;
  --radius-full: 999px;

  /* Ombres */
  --shadow-100: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-200: 0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-300: 0 10px 15px -3px rgba(0,0,0,0.1);
  --shadow-400: 0 20px 25px -5px rgba(0,0,0,0.1);

  /* Durées et courbes d'animation */
  --duration-fast:   0.25s;
  --duration-normal: 0.3s;
  --duration-slow:   0.85s;
  --ease-standard: ease;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-pop:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ======================================================
     COUCHE 2 — SÉMANTIQUE (sens, pas valeur)
     ====================================================== */

  --color-primary:       var(--color-green-700);
  --color-primary-hover: var(--color-green-400);
  --color-primary-active:var(--color-green-900);
  --color-accent:        var(--color-green-500);

  --color-surface:        var(--color-white);
  --color-surface-muted:  var(--color-gray-50);
  --color-surface-brand:  var(--color-green-50);
  --color-surface-inverse:var(--color-gray-900);

  --color-text-primary:   var(--color-gray-800);
  --color-text-secondary: var(--color-gray-500);
  --color-text-muted:     var(--color-gray-400);
  --color-text-inverse:   var(--color-white);
  --color-text-on-brand:  var(--color-primary);

  --color-border: var(--color-gray-200);
  --color-danger: var(--color-red-600);

  /* Niveaux de tarification : palette froide cohérente pour les plans standard,
     le plan mis en avant (Premium) reprend le vert de marque avec un accent or.
     accent = barre/coches, text = nom/bouton, border = contour doux, bg = survol */
  --color-tier-essentiel:        var(--color-teal-600);
  --color-tier-essentiel-text:   var(--color-teal-700);
  --color-tier-essentiel-border: var(--color-teal-200);
  --color-tier-essentiel-bg:     var(--color-teal-50);
  --color-tier-pro:        var(--color-blue-600);
  --color-tier-pro-text:   var(--color-blue-700);
  --color-tier-pro-border: var(--color-blue-200);
  --color-tier-pro-bg:     var(--color-blue-50);
  --color-tier-excellence:        var(--color-purple-600);
  --color-tier-excellence-text:   var(--color-purple-700);
  --color-tier-excellence-border: var(--color-purple-200);
  --color-tier-excellence-bg:     var(--color-purple-50);
  --color-tier-featured:        var(--color-primary);
  --color-tier-featured-deep:   var(--color-green-900);
  --color-tier-featured-accent: var(--color-amber-400);
  --color-tier-featured-check:  var(--color-green-300);

  --radius-sm: var(--radius-100);
  --radius-md: var(--radius-200);
  --radius-lg: var(--radius-300);
  --radius-xl: var(--radius-400);

  --shadow-sm: var(--shadow-100);
  --shadow-md: var(--shadow-200);
  --shadow-lg: var(--shadow-300);
  --shadow-xl: var(--shadow-400);

  --space-section-y: var(--space-24);
  --space-card-gap:  var(--space-6);

  /* ======================================================
     COUCHE 3 — COMPOSANTS (propre à chaque composant)
     ====================================================== */

  /* Bouton */
  --button-radius: var(--radius-sm);
  --button-padding-y: var(--space-3);
  --button-padding-x: var(--space-6);
  --button-font-weight: var(--font-weight-semibold);
  --button-primary-bg: var(--color-primary);
  --button-primary-bg-hover: var(--color-primary-hover);
  --button-primary-fg: var(--color-text-inverse);
  --button-primary-glow-hover: 0 0 0 4px rgba(34, 197, 94, 0.18);
  --button-outline-border: var(--color-primary);
  --button-outline-fg: var(--color-primary);

  /* Carte (feature-card, step-card, why-card partagent le même gabarit) */
  --card-bg: var(--color-surface-muted);
  --card-bg-hover: var(--color-surface);
  --card-border: var(--color-border);
  --card-border-hover: var(--color-primary);
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-8);
  --card-shadow-hover: var(--shadow-lg);
  --card-lift-hover: -8px;
  --card-icon-bg: var(--color-surface-brand);
  --card-icon-fg: var(--color-primary);
  --card-icon-radius: var(--radius-100);

  /* Badge (section-badge, pc4-badge-*) */
  --badge-radius: var(--radius-full);
  --badge-padding-y: var(--space-2);
  --badge-padding-x: var(--space-4);
  --badge-font-size: var(--font-size-sm);
  --badge-font-weight: var(--font-weight-medium);

  /* Champ de formulaire */
  --input-border: var(--color-border);
  --input-border-focus: var(--color-primary);
  --input-radius: var(--radius-sm);
  --input-padding-y: var(--space-3);
  --input-padding-x: var(--space-4);

  /* Révélation au scroll (voir .reveal dans styles.css) */
  --reveal-duration: var(--duration-slow);
  --reveal-distance: 48px;
  --reveal-easing: var(--ease-out-expo);
}