/* ═══════════════════════════════════════════════════════════
   tokens.css — Design tokens Crystal
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Fonds ── */
  --color-bg:         #1a1a2e;
  --color-bg-mid:     #16213e;
  --color-bg-card:    rgba(255,255,255,0.06);
  --color-bg-card-2:  rgba(255,255,255,0.04);
  --color-bg-hover:   rgba(255,255,255,0.09);
  --color-border:     rgba(255,255,255,0.10);
  --color-border-2:   rgba(255,255,255,0.06);

  /* ── Texte ── */
  --color-text:       #e8eaf6;
  --color-text-2:     #b0b8d4;
  --color-muted:      #7880a0;

  /* ── Accents crystal ── */
  --color-purple:     #a78bfa;
  --color-purple-2:   #7c6af7;
  --color-purple-dim: rgba(167,139,250,0.15);
  --color-teal:       #34d399;
  --color-teal-dim:   rgba(52,211,153,0.12);
  --color-red:        #f87171;
  --color-red-dim:    rgba(248,113,113,0.12);
  --color-orange:     #fb923c;
  --color-orange-dim: rgba(251,146,60,0.12);
  --color-blue:       #60a5fa;
  --color-blue-dim:   rgba(96,165,250,0.12);
  --color-yellow:     #fbbf24;
  --color-green:      #34d399;
  --color-pink:       #f472b6;

  /* ── Gradient fond ── */
  --gradient-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  --gradient-purple: linear-gradient(135deg, #a78bfa, #7c6af7);
  --gradient-teal:   linear-gradient(135deg, #34d399, #059669);
  --gradient-accent: linear-gradient(90deg, var(--color-purple), var(--color-blue));

  /* ── Typographie ── */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  14px;
  --text-lg:    16px;
  --text-xl:    20px;
  --text-2xl:   26px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;
  --weight-black:  800;

  /* ── Espacement ── */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;
  --space-4: 16px; --space-5: 20px;  --space-6: 24px;
  --space-7: 28px; --space-8: 32px;

  /* ── Bordures ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Effets ── */
  --blur-card:  blur(20px);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.2);

  /* ── Transitions ── */
  --transition-fast: 0.12s ease;
  --transition-base: 0.2s ease;

  /* ── Layout ── */
  --navbar-height:     56px;
  --content-max-width: 1400px;
}