/* ════════════════════════════════════════════════════════════
   Design tokens partagés — client (jeu/compte) + backoffice admin
   Source unique de vérité. Ne pas coder de couleur/espacement en dur.
   ════════════════════════════════════════════════════════════ */
:root {
  /* ── Accent — Acid Lime 2026 ─────────────────────────────── */
  --accent:       #C7F94D;
  --accent-rgb:   199,249,77;          /* recalculé par tenant (white-label) */
  --accent-light: #E4FF8F;             /* idem — éclairci depuis la couleur du bar */
  --accent-bg:    rgba(var(--accent-rgb),0.15);
  /* Rampe dérivée : suit automatiquement la couleur du tenant */
  --accent-bg-2:  rgba(var(--accent-rgb),0.25);
  --accent-line:  rgba(var(--accent-rgb),0.35);
  --accent-dark:  color-mix(in srgb, var(--accent) 80%, #000);

  /* ── Couleurs sémantiques ────────────────────────────────── */
  --gold:      #FFB300;
  --pop:       #FF5C8A;
  --red:       #FF4545;

  /* ── Texte ───────────────────────────────────────────────── */
  --text:      #ffffff;
  --text2:     rgba(255,255,255,0.55);
  --text3:     rgba(255,255,255,0.45);   /* relevé de .25 → lisibilité WCAG */

  /* ── Surfaces (base — un contexte peut surcharger localement) ─ */
  --bg:        #0a0a0a;
  --surface:   rgba(255,255,255,0.06);
  --surface2:  rgba(255,255,255,0.10);
  --border:    rgba(255,255,255,0.08);

  /* ── Typo de marque ──────────────────────────────────────── */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Radius ──────────────────────────────────────────────── */
  --r:         18px;
  --r-sm:      12px;
  --r-lg:      24px;

  /* ── Échelle d'espacement (4px base) ─────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* ── Safe areas (notch / home indicator) ─────────────────── */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 20px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* ── Cible tactile minimale (WCAG / mobile 2026) ─────────── */
  --tap: 44px;

  /* ── Élévation (système d'ombres) ────────────────────────── */
  --shadow-1: 0 1px 3px rgba(0,0,0,.35);
  --shadow-2: 0 6px 20px rgba(0,0,0,.40);
  --shadow-3: 0 16px 40px rgba(0,0,0,.55);
  --shadow-accent: 0 8px 28px rgba(var(--accent-rgb),.30);
}