/**
 * Voltaix Design Tokens — Source de verite unique
 * Toutes les valeurs extraites de l'existant, rien d'invente.
 * Tout nouveau code consomme ces tokens. Les anciens blocs
 * migrent progressivement quand on les touche.
 */

:root {

  /* ══════════════════════════════════════════
     COULEURS — Primitives
     ══════════════════════════════════════════ */
  --c-navy:        #1E2D3F;
  --c-orange:      #F5A624;
  --c-cream:       #FAF9F6;
  --c-white:       #FFFFFF;
  --c-gray:        #6B7888;
  --c-gray-dark:   #475569;
  --c-gray-light:  #9AA4B0;
  --c-green:       #1FA868;
  --c-red:         #B43C3C;
  --c-orange-hover:#FF7A00;

  /* Opacites navy (borders, ombres, overlays) */
  --c-navy-4:  rgba(30, 45, 63, .04);
  --c-navy-6:  rgba(30, 45, 63, .06);
  --c-navy-8:  rgba(30, 45, 63, .08);
  --c-navy-10: rgba(30, 45, 63, .10);
  --c-navy-12: rgba(30, 45, 63, .12);
  --c-navy-18: rgba(30, 45, 63, .18);

  /* Opacites orange */
  --c-orange-10: rgba(245, 166, 36, .10);
  --c-orange-25: rgba(245, 166, 36, .25);
  --c-orange-30: rgba(245, 166, 36, .30);
  --c-orange-45: rgba(245, 166, 36, .45);

  /* ══════════════════════════════════════════
     COULEURS — Semantiques (aliases)
     ══════════════════════════════════════════ */
  --c-text:          var(--c-navy);
  --c-text-muted:    var(--c-gray);
  --c-text-secondary:var(--c-gray-dark);
  --c-accent:        var(--c-orange);
  --c-accent-hover:  var(--c-orange-hover);
  --c-bg:            var(--c-cream);
  --c-bg-card:       var(--c-white);
  --c-border:        var(--c-navy-8);
  --c-success:       var(--c-green);
  --c-error:         var(--c-red);

  /* ══════════════════════════════════════════
     TYPOGRAPHIE
     ══════════════════════════════════════════ */
  --ff-body:    'IBM Plex Sans', sans-serif;
  --ff-heading: 'Fraunces', Georgia, serif;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   16px;
  --fs-lg:   17px;
  --fs-xl:   18px;
  --fs-h3:   clamp(1.25rem, 2.4vw, 1.6rem);
  --fs-h2:   clamp(2rem, 3.6vw, 2.8rem);
  --fs-h1:   clamp(2.4rem, 4.2vw, 3.4rem);

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --ls-tight: -0.02em;

  /* ══════════════════════════════════════════
     ESPACEMENTS — Padding lateraux conteneurs
     (systeme FULLWIDTH-V1)
     ══════════════════════════════════════════ */
  --pad-mobile:  24px;
  --pad-tablet:  40px;
  --pad-desktop: 56px;
  --pad-wide:    80px;

  /* Espacements sections (vertical) — reduits de 40% */
  --space-section:    64px;
  --space-section-sm:  44px;
  --space-section-xs:  34px;
  --space-header-gap:  28px;

  /* ══════════════════════════════════════════
     BORDER-RADIUS
     ══════════════════════════════════════════ */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ══════════════════════════════════════════
     OMBRES
     ══════════════════════════════════════════ */
  --shadow-sm:          0 2px 8px var(--c-navy-6);
  --shadow-card:        0 4px 20px var(--c-navy-6);
  --shadow-card-hover:  0 8px 28px var(--c-navy-8);
  --shadow-dropdown:    0 16px 48px var(--c-navy-12), 0 4px 12px var(--c-navy-4);
  --shadow-elevated:    0 24px 60px var(--c-navy-12);
  --shadow-focus:       0 0 0 3px var(--c-orange-25);
  --shadow-focus-error: 0 0 0 3px rgba(180, 60, 60, .15);

  /* ══════════════════════════════════════════
     TRANSITIONS
     ══════════════════════════════════════════ */
  --dur-fast:   0.15s;
  --dur-base:   0.2s;
  --dur-medium: 0.3s;
  --dur-slow:   0.6s;

  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);

  /* ══════════════════════════════════════════
     CONTENEURS (max-width)
     ══════════════════════════════════════════ */
  --w-text:      760px;
  --w-content:  1100px;
  --w-container:1280px;
  --w-wide:     1600px;

  /* ══════════════════════════════════════════
     BREAKPOINTS (reference — CSS ne supporte
     pas les variables dans les media queries)
     --bp-mobile:  640px
     --bp-tablet:  860px
     --bp-laptop:  1024px
     --bp-desktop: 1280px
     --bp-wide:    1600px
     ══════════════════════════════════════════ */
}