/* =========================================================
   tokens.css — LE CONTRAT DES VARIABLES
   Système porté d'après IMPLEMENT SYSTME\PROMPT_UNIVERSEL_THEME_COULEURS.txt
   et SYSTEME_BOUTON_PALETTE.txt :
   - 3 axes sur <html> : data-theme (fond), data-accent (action), data-style (style).
   - 10 variables d'accent EXACTEMENT (ni plus, ni moins).
   - États sémantiques fixes : ok / warn / danger / info, jamais reteints par l'accent.
   - Zéro couleur d'accent en dur ailleurs : tout lit les variables.
   ========================================================= */

/* ---------------- HORIZON : échelle typo (ratio 1.333) ---------------- */
:root {
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.333rem;
  --fs-xl: 1.777rem;
  --fs-2xl: 2.369rem;
  --fs-3xl: clamp(2.369rem, 1.9rem + 3.5vw, 4.209rem);

  /* Espacement (échelle 4 px) */
  --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-24: 6rem;

  --nav-height: 72px;
  --container-width: 1200px;

  /* Vitesses (Discipline 5) */
  --t-fast: 120ms;
  --t-ui: 160ms;
  --t-move: 250ms;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Rayons de base (data-style les ajuste) */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Aliases & Fallbacks de compatibilité */
  --primary-hover: #5b2eb4;
  --surface-card: var(--bg-card, #ffffff);
}

/* ================= AXE 1 : AMBIANCE DU FOND (4 signatures) ================= */

/* Mode Clair (défaut de première visite) */
[data-theme='clair'] {
  --bg-body: #f6f7fb;
  --bg-card: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.82);
  --surface: #eef0f6;
  --surface-strong: #e4e7ee;
  --text-100: #1a1d29;
  --text-200: #3d4356;
  --text-300: #67708a;
  --border: rgba(20, 24, 40, 0.10);
  --border-strong: rgba(20, 24, 40, 0.20);
  --shadow-card: 0 1px 3px rgba(16, 20, 35, 0.06), 0 8px 24px rgba(16, 20, 35, 0.05);
  --shadow-float: 0 12px 32px rgba(16, 20, 35, 0.12);

  /* encres sémantiques : foncées saturées sur fond clair */
  --ok: #15803d;
  --ok-ink: #14532d;
  --ok-soft: rgba(21, 128, 61, 0.12);
  --warn: #b45309;
  --warn-ink: #78350f;
  --warn-soft: rgba(180, 83, 9, 0.12);
  --danger: #d92d20;
  --danger-ink: #7f1d1d;
  --danger-soft: rgba(217, 45, 32, 0.10);
  --info: #1d4ed8;
  --info-ink: #172554;
  --info-soft: rgba(29, 78, 216, 0.10);
}

/* Violet Noir */
[data-theme='violetnoir'] {
  --bg-body: #14101f;
  --bg-card: #1d1730;
  --bg-glass: rgba(29, 23, 48, 0.85);
  --surface: #251d3f;
  --surface-strong: #2e2450;
  --text-100: #f3efff;
  --text-200: #cfc5e8;
  --text-300: #9d92bb;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.28);
  --shadow-float: 0 16px 40px rgba(0, 0, 0, 0.5);

  --ok: #34d399;
  --ok-ink: #6ee7b7;
  --ok-soft: rgba(52, 211, 153, 0.14);
  --warn: #fbbf24;
  --warn-ink: #fcd34d;
  --warn-soft: rgba(251, 191, 36, 0.14);
  --danger: #f87171;
  --danger-ink: #fca5a5;
  --danger-soft: rgba(248, 113, 113, 0.14);
  --info: #60a5fa;
  --info-ink: #93c5fd;
  --info-soft: rgba(96, 165, 250, 0.14);
}

/* Noir Cyber */
[data-theme='noircyber'] {
  --bg-body: #0a0c10;
  --bg-card: #12151c;
  --bg-glass: rgba(18, 21, 28, 0.85);
  --surface: #181c25;
  --surface-strong: #1f2430;
  --text-100: #edf2f8;
  --text-200: #c2cbd8;
  --text-300: #8b95a8;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 12px 30px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 18px 44px rgba(0, 0, 0, 0.6);

  --ok: #2dd4bf;
  --ok-ink: #5eead4;
  --ok-soft: rgba(45, 212, 191, 0.13);
  --warn: #fbbf24;
  --warn-ink: #fde68a;
  --warn-soft: rgba(251, 191, 36, 0.13);
  --danger: #fb7185;
  --danger-ink: #fda4af;
  --danger-soft: rgba(251, 113, 133, 0.13);
  --info: #38bdf8;
  --info-ink: #7dd3fc;
  --info-soft: rgba(56, 189, 248, 0.13);
}

/* Bleu Nuit & Or */
[data-theme='bleunuit'] {
  --bg-body: #0d1526;
  --bg-card: #14203a;
  --bg-glass: rgba(20, 32, 58, 0.86);
  --surface: #182a4a;
  --surface-strong: #1e3358;
  --text-100: #f2f6ff;
  --text-200: #c3d2ee;
  --text-300: #8fa3c8;
  --border: rgba(212, 175, 55, 0.18);
  --border-strong: rgba(212, 175, 55, 0.34);
  --shadow-card: 0 1px 3px rgba(4, 8, 18, 0.5), 0 12px 30px rgba(4, 8, 18, 0.4);
  --shadow-float: 0 18px 44px rgba(4, 8, 18, 0.6);

  --ok: #4ade80;
  --ok-ink: #86efac;
  --ok-soft: rgba(74, 222, 128, 0.13);
  --warn: #fcd34d;
  --warn-ink: #fde68a;
  --warn-soft: rgba(252, 211, 77, 0.13);
  --danger: #f87171;
  --danger-ink: #fca5a5;
  --danger-soft: rgba(248, 113, 113, 0.13);
  --info: #60a5fa;
  --info-ink: #93c5fd;
  --info-soft: rgba(96, 165, 250, 0.13);
}

/* ================= AXE 2 : COULEUR D'ACTION (6 accents + Perso) =================
   Les 10 variables du contrat, pour chaque accent fixe. */

[data-accent='violet'] {
  --primary: #7c3aed;
  --primary-hover: #6d28d9;
  --primary-dark: #5b2eb4;
  --primary-bright: #b79bf6;
  --primary-glow: rgba(0, 0, 0, 0.08);
  --primary-soft: rgba(124, 58, 237, 0.15);
  --primary-line: rgba(124, 58, 237, 0.38);
  --secondary: #a741e8;
  --gradient: linear-gradient(135deg, #7c3aed, #a741e8);
  --gradient-hover: linear-gradient(135deg, #8d51f0, #b558ec);
  --border-glow: rgba(0, 0, 0, 0.12);
}

[data-accent='or'] {
  --primary: #d4a017;
  --primary-hover: #b8860b;
  --primary-dark: #9c780f;
  --primary-bright: #ead0a7;
  --primary-glow: rgba(0, 0, 0, 0.08);
  --primary-soft: rgba(212, 160, 23, 0.15);
  --primary-line: rgba(212, 160, 23, 0.38);
  --secondary: #e39a2c;
  --gradient: linear-gradient(135deg, #d4a017, #e39a2c);
  --gradient-hover: linear-gradient(135deg, #ddaa2d, #e7a53e);
  --border-glow: rgba(0, 0, 0, 0.12);
}

[data-accent='bleu'] {
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-dark: #1b4bb2;
  --primary-bright: #95b8f5;
  --primary-glow: rgba(0, 0, 0, 0.08);
  --primary-soft: rgba(37, 99, 235, 0.15);
  --primary-line: rgba(37, 99, 235, 0.38);
  --secondary: #3a63f4;
  --gradient: linear-gradient(135deg, #2563eb, #3a63f4);
  --gradient-hover: linear-gradient(135deg, #4175f2, #5578f4);
  --border-glow: rgba(0, 0, 0, 0.12);
}

[data-accent='emeraude'] {
  --primary: #059669;
  --primary-hover: #047857;
  --primary-dark: #03704e;
  --primary-bright: #98dcc3;
  --primary-glow: rgba(0, 0, 0, 0.08);
  --primary-soft: rgba(5, 150, 105, 0.15);
  --primary-line: rgba(5, 150, 105, 0.38);
  --secondary: #22ab7f;
  --gradient: linear-gradient(135deg, #059669, #22ab7f);
  --gradient-hover: linear-gradient(135deg, #12aa78, #32b98c);
  --border-glow: rgba(0, 0, 0, 0.12);
}

[data-accent='rose'] {
  --primary: #e11d48;
  --primary-hover: #be123c;
  --primary-dark: #a91535;
  --primary-bright: #f5a1b7;
  --primary-glow: rgba(0, 0, 0, 0.08);
  --primary-soft: rgba(225, 29, 72, 0.15);
  --primary-line: rgba(225, 29, 72, 0.38);
  --secondary: #ee3d7a;
  --gradient: linear-gradient(135deg, #e11d48, #ee3d7a);
  --gradient-hover: linear-gradient(135deg, #e93961, #f1538d);
  --border-glow: rgba(0, 0, 0, 0.12);
}

[data-accent='cyan'] {
  --primary: #0891b2;
  --primary-hover: #0e7490;
  --primary-dark: #066b85;
  --primary-bright: #95dcee;
  --primary-glow: rgba(0, 0, 0, 0.08);
  --primary-soft: rgba(8, 145, 178, 0.15);
  --primary-line: rgba(8, 145, 178, 0.38);
  --secondary: #16a8c9;
  --gradient: linear-gradient(135deg, #0891b2, #16a8c9);
  --gradient-hover: linear-gradient(135deg, #19a0c0, #2bb4d3);
  --border-glow: rgba(0, 0, 0, 0.12);
}

/* En Mode Clair : mêmes teintes, luminosité -10 points (lisible sur blanc). */
[data-theme='clair'][data-accent='violet'] {
  --primary: #6d28d9;
  --primary-hover: #5b21b6;
  --primary-dark: #4d1d9c;
  --gradient: linear-gradient(135deg, #6d28d9, #8b2fd9);
  --gradient-hover: linear-gradient(135deg, #7c3aed, #9b42e0);
}

[data-theme='clair'][data-accent='or'] {
  --primary: #b8900f;
  --primary-hover: #92720c;
  --primary-dark: #85690a;
  --gradient: linear-gradient(135deg, #b8900f, #d19a13);
  --gradient-hover: linear-gradient(135deg, #c89d17, #d6a125);
}

[data-theme='clair'][data-accent='bleu'] {
  --primary: #1d4ed8;
  --primary-hover: #1e40af;
  --primary-dark: #14359c;
  --gradient: linear-gradient(135deg, #1d4ed8, #2f5be0);
  --gradient-hover: linear-gradient(135deg, #2f5be0, #4067e6);
}

[data-theme='clair'][data-accent='emeraude'] {
  --primary: #047857;
  --primary-hover: #065f46;
  --primary-dark: #03503a;
  --gradient: linear-gradient(135deg, #047857, #0f8d63);
  --gradient-hover: linear-gradient(135deg, #059669, #1a9f70);
}

[data-theme='clair'][data-accent='rose'] {
  --primary: #be123c;
  --primary-hover: #9f1239;
  --primary-dark: #900d2d;
  --gradient: linear-gradient(135deg, #be123c, #d92058);
  --gradient-hover: linear-gradient(135deg, #d92058, #e03168);
}

[data-theme='clair'][data-accent='cyan'] {
  --primary: #0e7490;
  --primary-hover: #155e75;
  --primary-dark: #0a5568;
  --gradient: linear-gradient(135deg, #0e7490, #1388a8);
  --gradient-hover: linear-gradient(135deg, #0891b2, #1c9cbf);
}

/* ================= AXE 3 : STYLE GLOBAL (3 signatures) ================= */

/* Souple : arrondies, doux, aéré (défaut) */
[data-style='souple'] {
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --t-ui: 160ms;
  --t-move: 260ms;
}

/* Editorial : serif pour les titres, angles nets */
[data-style='editorial'] {
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --t-ui: 140ms;
  --t-move: 220ms;
}

/* Technique : carré, mono pour les métadonnées, réactif */
[data-style='technique'] {
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --t-ui: 110ms;
  --t-move: 170ms;
}

/* Families gérées hors variables selon data-style */
[data-style='editorial'] .hero-title,
[data-style='editorial'] .section-title,
[data-style='editorial'] .login-brand {
  font-family: Georgia, 'Lora', 'Times New Roman', serif;
  letter-spacing: 0.005em;
}
[data-style='technique'] .nav-brand,
[data-style='technique'] .section-title,
[data-style='technique'] .crumb-item,
[data-style='technique'] .badge,
[data-style='technique'] .meta-label {
  font-family: 'JetBrains Mono', Consolas, monospace;
}

/* ================= ÉTAT : réduction d'animations ================= */
@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;
  }
}