/* ============================================================
   04-base.css — Base stylistique (body, backgrounds)
   ============================================================ */

html {
  background: var(--bg-base);
  color-scheme: dark;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* === Pattern de fond subtil (triangles bwiti) === */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('../assets/bg_pattern.jpg');
  background-size: 1000px auto;
  background-repeat: repeat;
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

/* === Vignette atmospherique pour profondeur === */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(ellipse 90% 60% at 50% 100%,
      rgba(16, 245, 159, 0.03) 0%,
      transparent 60%),
    radial-gradient(ellipse 80% 50% at 20% 0%,
      rgba(124, 92, 255, 0.04) 0%,
      transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* === Container principal au-dessus des decorations === */
#app-root {
  position: relative;
  z-index: var(--z-base);
  min-height: 100vh;
}