/* ============================================================================
   W.O.L.F. — Design Tokens
   Agence alexandalex.fr — système de design (dark-first, premium, industriel).
   Fichier de VARIABLES réutilisable : aucune règle de composant ici.
   Convention de nommage : --wolf-<catégorie>-<rôle>-<variante>.
   Indépendant de la langue (aucune valeur textuelle localisée).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. PALETTE PRIMITIVE (valeurs brutes — ne pas utiliser directement dans l'UI ;
   passer par les tokens sémantiques du §2). Anthracite → blanc + ambre loup.
   --------------------------------------------------------------------------- */
:root {
  /* Neutres — échelle « acier / anthracite » */
  --wolf-ink-950: #060708;   /* noir de meute       */
  --wolf-ink-900: #0b0d10;   /* canevas de base — charbon institutionnel */
  --wolf-ink-850: #101216;
  --wolf-ink-800: #15181d;
  --wolf-ink-750: #1c2027;
  --wolf-ink-700: #262b33;
  --wolf-ink-600: #363c46;
  --wolf-ink-500: #4b525e;
  --wolf-ink-400: #6b7280;
  --wolf-ink-300: #8b93a1;
  --wolf-ink-200: #a4adba;
  --wolf-ink-100: #cdd3dc;
  --wolf-ink-050: #edeff3;
  --wolf-ink-000: #ffffff;

  /* Ambre loup — accent signature (œil du loup / acier en fusion) */
  --wolf-amber-700: #b25e00;
  --wolf-amber-600: #e8830f;
  --wolf-amber-500: #ff9e2c;  /* accent de référence */
  --wolf-amber-400: #ffb25a;
  --wolf-amber-300: #ffc78a;
  --wolf-amber-100: #ffe6c7;

  /* Couleurs d'état (sémantique fonctionnelle, sobres sur fond sombre) */
  --wolf-green-500: #3dd68c;
  --wolf-green-700: #16794a;
  --wolf-red-500:   #ff5c5c;
  --wolf-red-700:   #a11f1f;
  --wolf-blue-500:  #5bb0ff;  /* information / lien froid — bleu clair « tech », pas un bleu profond */
  --wolf-blue-700:  #1f5fa1;
  --wolf-yellow-500:#ffc24b;

  /* Variantes d'accent commutables (voir rapport) — surcharger --wolf-color-accent* */
  --wolf-acid-500:   #b6ff2e;  /* Variante B : vert acide « tech »   */
  --wolf-acid-600:   #8fd400;
  --wolf-signal-500: #ff3b30;  /* Variante C : rouge signal          */
  --wolf-signal-600: #d61f16;
}

/* ---------------------------------------------------------------------------
   2. TOKENS SÉMANTIQUES — thème SOMBRE (défaut). C'est CE niveau que l'UI consomme.
   --------------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Fonds & surfaces (empilement d'élévation) */
  --wolf-color-bg:            var(--wolf-ink-900);
  --wolf-color-bg-elevated:   var(--wolf-ink-850);
  --wolf-color-surface:       var(--wolf-ink-800);
  --wolf-color-surface-2:     var(--wolf-ink-750);
  --wolf-color-surface-inset: var(--wolf-ink-950);

  /* Bordures & filets */
  --wolf-color-border:        var(--wolf-ink-700);
  --wolf-color-border-strong: var(--wolf-ink-600);
  --wolf-color-border-subtle: var(--wolf-ink-800);

  /* Texte */
  --wolf-color-text:          var(--wolf-ink-050);  /* ~17:1 sur bg — AAA */
  --wolf-color-text-muted:    var(--wolf-ink-200);  /* ~8.7:1 sur bg — AAA */
  --wolf-color-text-subtle:   var(--wolf-ink-300);  /* ~6.4:1 sur bg — AA (texte normal) */
  --wolf-color-text-invert:   var(--wolf-ink-900);

  /* Accent (ambre) */
  --wolf-color-accent:          var(--wolf-amber-500);
  --wolf-color-accent-hover:    var(--wolf-amber-400);
  --wolf-color-accent-press:    var(--wolf-amber-600);
  --wolf-color-accent-text:     var(--wolf-amber-400); /* ambre en TEXTE sur fond sombre — ~9.3:1 AAA */
  --wolf-color-accent-contrast: var(--wolf-ink-900);   /* texte SUR l'ambre — ~9.3:1 AAA */
  --wolf-color-accent-soft:     rgba(255, 158, 44, 0.12);
  --wolf-color-accent-line:     rgba(255, 158, 44, 0.38);

  /* États sémantiques */
  --wolf-color-success:      var(--wolf-green-500);
  --wolf-color-success-soft: rgba(61, 214, 140, 0.13);
  --wolf-color-danger:       var(--wolf-red-500);
  --wolf-color-danger-soft:  rgba(255, 92, 92, 0.13);
  --wolf-color-info:         var(--wolf-blue-500);
  --wolf-color-info-soft:    rgba(91, 176, 255, 0.13);
  --wolf-color-warning:      var(--wolf-yellow-500);
  --wolf-color-warning-soft: rgba(255, 194, 75, 0.13);

  /* Focus — anneau visible, non ambigu (a11y) */
  --wolf-color-focus:      var(--wolf-amber-400);
  --wolf-color-focus-halo: rgba(255, 178, 90, 0.35);

  /* Champs de formulaire */
  --wolf-color-field-bg:     var(--wolf-ink-850);
  --wolf-color-field-border: var(--wolf-ink-600);
  --wolf-color-placeholder:  var(--wolf-ink-300);  /* ~6:1 sur le fond de champ — AA */

  /* Ombres (dark : subtiles + lueur d'accent) */
  --wolf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55);
  --wolf-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
  --wolf-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.6);
  --wolf-shadow-glow: 0 0 0 1px var(--wolf-color-accent-line);

  /* Fond du hero — APLAT charbon, sans dégradé (charte institutionnelle, zéro fioriture) */
  --wolf-gradient-hero: var(--wolf-ink-950);
}

/* ---------------------------------------------------------------------------
   2b. Thème CLAIR (extension — la charte est dark-first mais reste utilisable
   en clair pour docs/impression). Contrastes recalculés pour AA/AAA.
   --------------------------------------------------------------------------- */
[data-theme="light"] {
  color-scheme: light;

  --wolf-color-bg:            #f4f5f7;
  --wolf-color-bg-elevated:   #ffffff;
  --wolf-color-surface:       #ffffff;
  --wolf-color-surface-2:     #eef0f3;
  --wolf-color-surface-inset: #e6e9ee;

  --wolf-color-border:        #d3d8e0;
  --wolf-color-border-strong: #b7bdc8;
  --wolf-color-border-subtle: #e5e8ed;

  --wolf-color-text:          #14171c;  /* ~15:1 sur bg — AAA */
  --wolf-color-text-muted:    #454c58;  /* ~8:1  — AAA        */
  --wolf-color-text-subtle:   #626a78;  /* ~5:1  — AA         */
  --wolf-color-text-invert:   #ffffff;

  --wolf-color-accent:          var(--wolf-amber-600);
  --wolf-color-accent-hover:    var(--wolf-amber-500);
  --wolf-color-accent-press:    var(--wolf-amber-700);
  --wolf-color-accent-text:     #9a5200; /* ambre foncé — ~5.4:1 sur bg clair, AA en TEXTE */
  --wolf-color-accent-contrast: #14171c;               /* texte sombre sur l'ambre              */
  --wolf-color-accent-soft:     rgba(232, 131, 15, 0.14);
  --wolf-color-accent-line:     rgba(178, 94, 0, 0.4);

  --wolf-color-success:      var(--wolf-green-700);
  --wolf-color-success-soft: rgba(22, 121, 74, 0.12);
  --wolf-color-danger:       var(--wolf-red-700);
  --wolf-color-danger-soft:  rgba(161, 31, 31, 0.1);
  --wolf-color-info:         var(--wolf-blue-700);
  --wolf-color-info-soft:    rgba(31, 95, 161, 0.1);
  --wolf-color-warning:      #9a6a00;
  --wolf-color-warning-soft: rgba(154, 106, 0, 0.12);

  --wolf-color-focus:      var(--wolf-amber-700);
  --wolf-color-focus-halo: rgba(178, 94, 0, 0.3);

  --wolf-color-field-bg:     #ffffff;
  --wolf-color-field-border: #b7bdc8;
  --wolf-color-placeholder:  #5f6775;  /* ~5.7:1 sur blanc — AA (corrigé) */

  --wolf-shadow-sm: 0 1px 2px rgba(20, 23, 28, 0.08);
  --wolf-shadow-md: 0 4px 14px rgba(20, 23, 28, 0.1), 0 1px 2px rgba(20, 23, 28, 0.06);
  --wolf-shadow-lg: 0 18px 44px rgba(20, 23, 28, 0.14), 0 2px 6px rgba(20, 23, 28, 0.08);
  --wolf-shadow-glow: 0 0 0 1px var(--wolf-color-accent-line);

  --wolf-gradient-hero: var(--wolf-color-bg-elevated);
}

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHIE
   Display : Space Grotesk (grotesque tech, géométrique, fort caractère).
   Texte   : Inter (lisibilité maximale, neutre, multilingue).
   Mono    : JetBrains Mono (badges, timecodes « 1:15–1:50 », labels techniques).
   Fallbacks système robustes si les webfonts ne chargent pas.
   --------------------------------------------------------------------------- */
:root {
  --wolf-font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wolf-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wolf-font-mono:    "JetBrains Mono", "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", monospace;

  /* Échelle typographique (base 16px, ratio ~1.25) */
  --wolf-text-2xs: 0.6875rem; /* 11px */
  --wolf-text-xs:  0.75rem;   /* 12px */
  --wolf-text-sm:  0.875rem;  /* 14px */
  --wolf-text-base:1rem;      /* 16px */
  --wolf-text-md:  1.125rem;  /* 18px */
  --wolf-text-lg:  1.25rem;   /* 20px */
  --wolf-text-xl:  1.5rem;    /* 24px */
  --wolf-text-2xl: 1.875rem;  /* 30px */
  --wolf-text-3xl: 2.375rem;  /* 38px */
  --wolf-text-4xl: 3rem;      /* 48px */
  --wolf-text-5xl: 3.75rem;   /* 60px */
  --wolf-text-6xl: 4.75rem;   /* 76px — hero display */

  /* Graisses */
  --wolf-weight-regular:  400;
  --wolf-weight-medium:   500;
  --wolf-weight-semibold: 600;
  --wolf-weight-bold:     700;

  /* Interlignes */
  --wolf-leading-none:    1;
  --wolf-leading-tight:   1.08;
  --wolf-leading-snug:    1.2;
  --wolf-leading-normal:  1.5;
  --wolf-leading-relaxed: 1.7;

  /* Interlettrage */
  --wolf-tracking-tighter: -0.03em;
  --wolf-tracking-tight:   -0.015em;
  --wolf-tracking-normal:  0;
  --wolf-tracking-wide:    0.04em;
  --wolf-tracking-wider:   0.09em;  /* eyebrows / labels mono en capitales */
}

/* ---------------------------------------------------------------------------
   4. ESPACEMENTS — échelle 4px (0.25rem)
   --------------------------------------------------------------------------- */
:root {
  --wolf-space-0:  0;
  --wolf-space-px: 1px;
  --wolf-space-1:  0.25rem;  /* 4  */
  --wolf-space-2:  0.5rem;   /* 8  */
  --wolf-space-3:  0.75rem;  /* 12 */
  --wolf-space-4:  1rem;     /* 16 */
  --wolf-space-5:  1.25rem;  /* 20 */
  --wolf-space-6:  1.5rem;   /* 24 */
  --wolf-space-8:  2rem;     /* 32 */
  --wolf-space-10: 2.5rem;   /* 40 */
  --wolf-space-12: 3rem;     /* 48 */
  --wolf-space-16: 4rem;     /* 64 */
  --wolf-space-20: 5rem;     /* 80 */
  --wolf-space-24: 6rem;     /* 96 */
  --wolf-space-32: 8rem;     /* 128 */
}

/* ---------------------------------------------------------------------------
   5. RAYONS, FILETS, GRILLE, MOUVEMENT, Z-INDEX
   --------------------------------------------------------------------------- */
:root {
  /* Rayons — charte Carbon/institutionnelle : coins nets, quasi carrés. */
  --wolf-radius-none: 0;
  --wolf-radius-sm:   0;
  --wolf-radius-md:   2px;
  --wolf-radius-lg:   2px;
  --wolf-radius-xl:   3px;
  --wolf-radius-2xl:  4px;
  --wolf-radius-pill: 2px;   /* chips/tags boxy façon documentation technique */

  /* Épaisseurs de filet */
  --wolf-border-hairline: 1px;
  --wolf-border-thick:    2px;
  --wolf-border-heavy:    3px;

  /* Grille & conteneur */
  --wolf-container-max:  1200px;
  --wolf-container-wide: 1320px;
  --wolf-container-pad:  var(--wolf-space-6);
  --wolf-grid-columns:   12;
  --wolf-grid-gutter:    var(--wolf-space-4);   /* gouttières fines (24 → 16px), grille dense */

  /* Mouvement — décélération « nette et rapide » (précision du loup) */
  --wolf-ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --wolf-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --wolf-duration-fast:   120ms;
  --wolf-duration-normal: 200ms;
  --wolf-duration-slow:   320ms;

  /* Z-index */
  --wolf-z-base:     0;
  --wolf-z-raised:   10;
  --wolf-z-sticky:   100;
  --wolf-z-header:   1000;
  --wolf-z-overlay:  2000;
  --wolf-z-modal:    3000;
  --wolf-z-toast:    4000;
}

/* Respect de la préférence « animations réduites » */
@media (prefers-reduced-motion: reduce) {
  :root {
    --wolf-duration-fast:   0ms;
    --wolf-duration-normal: 0ms;
    --wolf-duration-slow:   0ms;
  }
}