/* ============================================================
   DESIGN TOKENS — V'apothéose
   Source unique de vérité pour couleurs, typo, espacements.
   ============================================================ */

:root {
  /* ---------- COULEURS ---------- */
  /* Fonds */
  --bg-0: #07070b;            /* fond le plus profond */
  --bg-1: #0d0d14;            /* fond principal */
  --bg-2: #14141d;            /* surfaces (cards) */
  --bg-3: #1c1c28;            /* surfaces élevées */
  --bg-4: #262635;            /* hover surfaces */

  /* Texte */
  --text-0: #ffffff;
  --text-1: #e8e8f0;
  --text-2: #b8b8c8;
  --text-3: #7c7c8c;
  --text-4: #4a4a58;

  /* Bordures */
  --border-1: rgba(255, 255, 255, 0.06);
  --border-2: rgba(255, 255, 255, 0.10);
  --border-3: rgba(255, 255, 255, 0.18);

  /* Accents néon */
  --neon-lime: #c6ff3d;
  --neon-lime-soft: rgba(198, 255, 61, 0.15);
  --neon-cyan: #00e5ff;
  --neon-cyan-soft: rgba(0, 229, 255, 0.15);
  --neon-violet: #9d4edd;
  --neon-violet-soft: rgba(157, 78, 221, 0.18);

  /* Sémantique */
  --accent: var(--neon-lime);
  --accent-soft: var(--neon-lime-soft);
  --success: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;

  /* Gradients signature */
  --gradient-hero: radial-gradient(ellipse at top right, rgba(157, 78, 221, 0.22), transparent 55%),
                   radial-gradient(ellipse at bottom left, rgba(0, 229, 255, 0.18), transparent 50%),
                   linear-gradient(180deg, #0a0a14 0%, #07070b 100%);
  --gradient-accent: linear-gradient(135deg, var(--neon-lime) 0%, var(--neon-cyan) 100%);
  --gradient-violet: linear-gradient(135deg, var(--neon-violet) 0%, var(--neon-cyan) 100%);
  --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);

  /* ---------- TYPOGRAPHIE ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg: 1.125rem;    /* 18 */
  --text-xl: 1.25rem;     /* 20 */
  --text-2xl: 1.5rem;     /* 24 */
  --text-3xl: 2rem;       /* 32 */
  --text-4xl: 2.75rem;    /* 44 */
  --text-5xl: 3.75rem;    /* 60 */
  --text-6xl: 5rem;       /* 80 */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.12em;

  /* ---------- ESPACEMENTS ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---------- LAYOUT ---------- */
  --container-max: 1400px;
  --container-narrow: 1100px;
  --header-height: 76px;

  /* ---------- RADIUS ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- OMBRES ---------- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow-lime: 0 0 32px rgba(198, 255, 61, 0.35);
  --shadow-glow-cyan: 0 0 32px rgba(0, 229, 255, 0.35);
  --shadow-glow-violet: 0 0 32px rgba(157, 78, 221, 0.35);

  /* ---------- TRANSITIONS ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 500ms;

  /* ---------- Z-INDEX ---------- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}