/* ============================================
   THÈME HALLOWEEN - Horreur et mystère
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Special+Elite&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  /* === Variables nouveau design system === */
  --bg:        #120a18;
  --bg-soft:   #1c1023;
  --bg-card:   #2a1735;
  --bg-card-2: #361d44;
  --bg-elev:   #432857;
  --bg-deep:   #0b0610;

  --ink:    #f1e6f7;
  --ink-2:  #d4bce0;
  --ink-3:  #a48cb0;
  --ink-4:  #7a6485;
  --hairline:        rgba(255, 102, 0, 0.18);
  --hairline-strong: rgba(255, 102, 0, 0.35);

  --gold:        #ff6600;
  --gold-light:  #ff8c33;
  --gold-dark:   #cc4f00;
  --copper:      #9933ff;
  --accent:      #ff6600;
  --accent-deep: #cc4f00;
  --ember:       #ff5555;
  --moss:        #66ff33;

  --ok:     #66cc33;
  --warn:   #ffaa33;
  --danger: #ff3344;

  --f-display: "Creepster", "Cormorant Garamond", cursive;
  --f-heading: "Creepster", "Cinzel", cursive;
  --f-body:    "Special Elite", "Lora", serif;

  /* === Aliases legacy === */
  --bg-primary:   var(--bg);
  --bg-secondary: var(--bg-soft);
  --bg-tertiary:  var(--bg-card);
  --card-bg-start: var(--bg-card);
  --card-bg-end:   var(--bg-card-2);
  --accent-primary:       var(--gold);
  --accent-primary-light: var(--gold-light);
  --accent-primary-dark:  var(--gold-dark);
  --accent-secondary:     var(--copper);
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted:     var(--ink-3);
  --color-success:       var(--ok);
  --color-success-light: #88ff55;
  --color-danger:        var(--danger);
  --color-danger-light:  #ff7777;
  --font-display: var(--f-display);
  --font-heading: var(--f-heading);
  --font-body:    var(--f-body);
}

/* Fond glauque avec brumes violacées */
body {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 102, 0, 0.08), transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(153, 51, 255, 0.10), transparent 70%),
    linear-gradient(160deg, #1a0f1a 0%, #2a1635 40%, #0d0612 100%) !important;
}

/* Brume orange/violette qui dérive */
body::before {
  background:
    radial-gradient(ellipse 50% 30% at 20% 70%, rgba(255, 102, 0, 0.10), transparent 70%),
    radial-gradient(ellipse 40% 25% at 75% 30%, rgba(153, 51, 255, 0.12), transparent 70%),
    radial-gradient(ellipse 60% 35% at 50% 90%, rgba(255, 51, 119, 0.08), transparent 70%),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 4px) !important;
  background-size: 200% 200%, 220% 220%, 240% 240%, auto !important;
}
/* Lueur d'âme qui pulse */
body::after {
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 102, 0, 0.08) 0%, transparent 55%) !important;
}