/* ============================================================
   MDJLABS — Design Tokens
   Même main que Prolearn, autre personnalité.
   Axe : carbone / encre / réactif électrique
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Surfaces : carbone profond, plus neutre que Prolearn ---- */
  --bg-0: #070708;      /* fond du site */
  --bg-1: #0C0C0E;      /* panneau, carte */
  --bg-2: #121214;      /* carte survolée */
  --bg-3: #19191C;      /* carte sélectionnée */
  --bg-4: #232327;      /* chip, input */

  /* ---- Hairlines ---- */
  --line-weak:   rgba(255, 255, 255, 0.045);
  --line:        rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* ---- Texte ---- */
  --fg-0:  #F2F0ED;   /* primaire — blanc chaud, pas le blanc bleuté Prolearn */
  --fg-1:  #B9B6B1;   /* secondaire */
  --fg-2:  #807D78;   /* tertiaire, libellés */
  --fg-3:  #56544F;   /* indices, désactivé */
  --fg-inv:#0A0908;   /* sur accent */

  /* ---- Accent : orange réactif (défaut) ---- */
  --acc:      #FF6A3C;
  --acc-hi:   #FF8E66;
  --acc-deep: #C2421C;
  --acc-glow: rgba(255, 106, 60, 0.22);
  --acc-soft: rgba(255, 106, 60, 0.09);
  --acc-line: rgba(255, 106, 60, 0.32);

  /* ---- Prolearn : seul rappel autorisé du vert phosphore ---- */
  --prolearn: #7FFFA8;
  --prolearn-glow: rgba(127, 255, 168, 0.2);
  --prolearn-soft: rgba(127, 255, 168, 0.08);
  --prolearn-line: rgba(127, 255, 168, 0.28);

  /* ---- Typographie ---- */
  --ff-sans: 'Geist', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono: 'Geist Mono', ui-monospace, 'JetBrains Mono', monospace;

  --lh-tight: 1.05;
  --lh-snug:  1.35;
  --lh-body:  1.6;

  /* ---- Espacements ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-30: 120px;

  /* ---- Rayons : plus tranchés que Prolearn ---- */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 6px;

  /* ---- Mouvement : net et rapide ---- */
  --ease: cubic-bezier(.22, .8, .24, 1);
  --dur-fast: 110ms;
  --dur: 190ms;
  --dur-slow: 420ms;

  --glow-focus: 0 0 0 2px var(--acc), 0 0 0 4px var(--acc-glow);
}

/* ---- Variantes de réactif (tweak) ---- */
:root[data-reactif="cyan"] {
  --acc:      #45D2FF;
  --acc-hi:   #7FE2FF;
  --acc-deep: #1E89B3;
  --acc-glow: rgba(69, 210, 255, 0.2);
  --acc-soft: rgba(69, 210, 255, 0.09);
  --acc-line: rgba(69, 210, 255, 0.32);
}
:root[data-reactif="acide"] {
  --acc:      #DCFF3D;
  --acc-hi:   #E9FF7E;
  --acc-deep: #93B312;
  --acc-glow: rgba(220, 255, 61, 0.18);
  --acc-soft: rgba(220, 255, 61, 0.08);
  --acc-line: rgba(220, 255, 61, 0.3);
}

/* ------ Reset ------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--ff-sans);
  font-size: 15px;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
::selection { background: var(--acc); color: var(--fg-inv); }

/* ------ Utilitaires ------ */
.mono { font-family: var(--ff-mono); font-feature-settings: "zero"; letter-spacing: -0.01em; }
.label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 500;
}

/* Focus visible */
:focus-visible { outline: none; box-shadow: var(--glow-focus); border-radius: var(--r-sm); }

/* Scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 999px; border: 2px solid var(--bg-0); }
*::-webkit-scrollbar-thumb:hover { background: #2E2E33; }