:root {
  --sf-bg: #0b0f0b;
  --sf-ink: #e5ffe5;
  --sf-primary: #00FF00;
  --sf-muted: #7af57a;
  --sf-cabaret: #ff2e88;
  --sf-cream: #fdf4e7;
  --sf-shadow: #0a0a0a;
}

/* Base colors */
html, body { background-color: var(--sf-bg); color: var(--sf-ink); }

/* Links */
a { color: var(--sf-primary); text-decoration: none; }
a:hover { color: var(--sf-cabaret); }

/* Tailwind bridge */
@layer utilities {
  .btn { @apply inline-flex items-center gap-2 px-5 py-2 rounded-full border transition font-medium; 
         border-color: color-mix(in oklab, var(--sf-primary) 60%, transparent);
         color: var(--sf-ink); }
  .btn:hover { @apply shadow; background: color-mix(in oklab, var(--sf-primary) 20%, transparent); }
  .btn.btn--ghost { @apply border-transparent; background: color-mix(in oklab, black 80%, transparent); }
  .btn.btn--ghost:hover { background: color-mix(in oklab, var(--sf-primary) 15%, black); }

  .card { @apply rounded-2xl bg-black/40 backdrop-blur-md shadow-xl; }
  .chip { @apply text-xs px-2.5 py-1 rounded-full; background: color-mix(in oklab, var(--sf-primary) 16%, transparent); 
          border: 1px solid color-mix(in oklab, var(--sf-primary) 28%, transparent); color: var(--sf-ink); }

  .title { @apply font-display tracking-tight; }
  .neon { text-shadow: 0 0 10px var(--sf-primary), 0 0 20px var(--sf-primary); }
  .cabaret { text-shadow: 0 1px 0 #ffffff22, 0 2px 0 #ffffff11, 0 3px 6px #000000aa; }
}

/* Prose tweaks */
.prose :where(a) { color: var(--sf-primary); }
.prose :where(strong) { color: var(--sf-cream); }
.prose :where(em) { color: var(--sf-muted); }


/* Film grain + bloom */
.grain { mix-blend-mode: overlay; opacity: .18; background-image:
  conic-gradient(from 0deg, #0000 0 25%, #000 0 50%, #0000 0 75%, #000 0 100%);
  background-size: 4px 4px; animation: grain-move 1.5s steps(6) infinite; }
@keyframes grain-move { to { transform: translate3d(2px, -2px, 0); } }
.film-bloom { box-shadow: inset 0 0 120px #00FF0015; }

/* Inputs & modals */
.input { @apply w-full rounded-xl bg-black/40 border border-white/10 px-3 py-2 outline-none focus:ring-2 focus:ring-[color:var(--sf-primary)]/50; color: var(--sf-ink); }
.modal { @apply fixed inset-0 z-50 flex items-center justify-center p-4; }
.modal-card { @apply card w-full max-w-lg p-6 ring-1 ring-white/10; }
.modal-title { @apply font-display text-2xl; }

/* Cabaret mode (accentue les roses, conserve le vert en primaire) */
.cabaret-on .btn { border-color: color-mix(in oklab, var(--sf-cabaret) 60%, transparent); }
.cabaret-on .btn:hover { background: color-mix(in oklab, var(--sf-cabaret) 18%, transparent); }
.cabaret-on .chip { background: color-mix(in oklab, var(--sf-cabaret) 16%, transparent); border-color: color-mix(in oklab, var(--sf-cabaret) 28%, transparent); }
.cabaret-on .neon { text-shadow: 0 0 10px var(--sf-cabaret), 0 0 20px var(--sf-cabaret); }