/* ============================================================
 * Varelec — Design System Tokens
 * ============================================================
 * Architecture à 3 niveaux :
 *   1. Primitives  (préfixe _)         → palette brute, ne PAS utiliser directement
 *   2. Semantic    (préfixe color-, sp-, fs-, r-, sh-, tr-, z-)  → à utiliser
 *   3. Legacy      (sans préfixe, ou vlx-)  → aliases rétrocompat, à retirer
 * ============================================================ */

:root {
  /* ---------- Primitives — Color palette ---------- */
  --_black:      #000000;
  --_white:      #ffffff;

  --_neutral-50:  #fafafa;
  --_neutral-100: #f4f4f5;
  --_neutral-200: #e4e4e7;
  --_neutral-400: #a1a1aa;
  --_neutral-500: #71717a;
  --_neutral-600: #52525b;
  --_neutral-700: #3f3f46;
  --_neutral-800: #27272a;
  --_neutral-900: #18181b;
  --_neutral-950: #09090b;

  --_blue-400:   #3b82f6;
  --_blue-500:   #2563eb;
  --_blue-600:   #1d4ed8;

  --_violet-400: #a78bfa;
  --_violet-500: #8b5cf6;

  --_green-400:  #34d399;
  --_green-500:  #22c55e;
  --_green-600:  #10b981;

  --_yellow-400: #facc15;
  --_yellow-500: #eab308;

  --_orange-500: #f59e0b;

  --_red-500:    #ef4444;

  /* ---------- Semantic — Surfaces & borders ---------- */
  --color-bg:             #07070a;
  --color-surface-1:      #0e0e16;
  --color-surface-2:      #16161f;
  --color-surface-hover:  rgba(255,255,255,.04);
  --color-border:         rgba(255,255,255,.08);
  --color-border-strong:  rgba(255,255,255,.12);

  /* ---------- Semantic — Brand & state ---------- */
  --color-primary:        var(--_blue-500);
  --color-primary-hover:  var(--_blue-600);
  --color-primary-glow:   rgba(37,99,235,.15);

  --color-accent:         var(--_violet-400);
  --color-accent-glow:    rgba(167,139,250,.15);

  --color-success:        var(--_green-500);
  --color-success-glow:   rgba(34,197,94,.15);
  --color-warning:        var(--_yellow-400);
  --color-danger:         var(--_red-500);

  /* ---------- Semantic — Text ---------- */
  --color-text:           var(--_neutral-200);
  --color-text-muted:     #9ca3af;
  --color-text-subtle:    var(--_neutral-500);
  --color-text-inverse:   var(--_white);

  /* ---------- Semantic — Spacing (base 4px / 0.25rem) ---------- */
  --sp-0:   0;
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;

  /* ---------- Semantic — Typography (modular scale 1.125) ---------- */
  --ff-sans:      'Inter', system-ui, -apple-system, sans-serif;
  --ff-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs:        0.75rem;
  --fs-sm:        0.875rem;
  --fs-base:      1rem;
  --fs-md:        1.125rem;
  --fs-lg:        1.25rem;
  --fs-xl:        1.5rem;
  --fs-2xl:       1.875rem;
  --fs-3xl:       2.25rem;
  --fs-4xl:       3rem;
  --fs-5xl:       3.75rem;

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

  --lh-tight:     1.1;
  --lh-snug:      1.3;
  --lh-base:      1.5;
  --lh-loose:     1.7;

  /* ---------- Semantic — Radius ---------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 9999px;

  /* ---------- Semantic — Shadows ---------- */
  --sh-sm:    0 1px 2px rgba(0,0,0,.35);
  --sh-md:    0 4px 12px rgba(0,0,0,.4);
  --sh-lg:    0 8px 32px rgba(0,0,0,.5);
  --sh-xl:    0 20px 60px rgba(0,0,0,.6);
  --sh-glow:  0 0 20px var(--color-primary-glow);

  /* ---------- Semantic — Transitions ---------- */
  --tr-fast:  150ms cubic-bezier(0.4, 0, 0.2, 1);
  --tr-base:  250ms cubic-bezier(0.4, 0, 0.2, 1);
  --tr-slow:  400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Semantic — Z-index scale ---------- */
  --z-base:             1;
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-fixed:          300;
  --z-modal-backdrop: 400;
  --z-modal:          500;
  --z-popover:        600;
  --z-toast:          700;
  --z-tooltip:        800;

  /* ---------- Semantic — Layout ---------- */
  --layout-max-w:     1200px;
  --layout-nav-h:     56px;
  --layout-pad-x:     2rem;

  /* ---------- Semantic — Breakpoints (mobile-first canonical) ---------- */
  /* Usage JS: getComputedStyle(:root).getPropertyValue("--bp-md") */
  /* CSS:  (min-width: 768px) — use literal value; custom media not yet shipped */
  --bp-xs:  480px;   /* small phone */
  --bp-sm:  640px;   /* large phone */
  --bp-md:  768px;   /* tablet */
  --bp-lg:  1024px;  /* desktop */
  --bp-xl:  1280px;  /* wide desktop */
  --bp-2xl: 1536px;  /* extra-wide */

  /* ============================================================
   * Legacy aliases (rétrocompat — à retirer progressivement)
   * ============================================================ */

  /* Site public — varelec-style.css (ligne 2, legacy) */
  --blue:             var(--color-primary);
  --blue-vivid:       var(--_blue-400);
  --blue-glow:        var(--color-primary-glow);
  --dark:             var(--color-bg);
  --card:             var(--color-surface-1);
  --card2:            var(--color-surface-2);
  --border:           var(--color-border);
  --green:            var(--color-success);
  --muted:            var(--color-text-muted);
  --orange:           var(--_orange-500);
  --accent:           var(--color-accent);
  --radius:           var(--r-lg);
  --shadow:           var(--sh-lg);
  --elec-yellow:      var(--color-warning);
  --elec-yellow-soft: rgba(250,204,21,.15);
  --success:          var(--color-success);

  /* Site public — varelec-style.css (ligne 824+, récent --vlx-*) */
  --vlx-dark:         var(--color-bg);
  --vlx-card:         var(--color-surface-1);
  --vlx-card2:        var(--color-surface-2);
  --vlx-brd:          var(--color-border);
  --vlx-brd-strong:   var(--color-border-strong);
  --vlx-text:         var(--color-text);
  --vlx-muted:        var(--color-text-muted);
  --vlx-blue:         var(--_blue-400);
  --vlx-blue-glow:    rgba(59,130,246,.12);
  --vlx-accent:       var(--color-accent);
  --vlx-yellow:       var(--color-warning);
  --vlx-green:        var(--_green-600);
  --vlx-red:          var(--color-danger);
  --vlx-orange:       var(--_orange-500);
  --vlx-radius:       var(--r-lg);
}

/* ============================================================
 * Accessibility — respect user preferences
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Enable light theme with data-theme="light" if ever needed (future work) */
[data-theme="light"] {
  --color-bg:             var(--_neutral-50);
  --color-surface-1:      var(--_white);
  --color-surface-2:      var(--_neutral-100);
  --color-border:         rgba(0,0,0,.08);
  --color-border-strong:  rgba(0,0,0,.15);
  --color-text:           var(--_neutral-900);
  --color-text-muted:     var(--_neutral-600);
  --color-text-subtle:    var(--_neutral-400);
}

/* Global focus ring — a11y */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}