/* ============================================================
   NOCTURNE — design system iLovekaraoke.it
   Ricostruito dai comp di design (09/08/2026).
   Ground scuro · accento blurple · Inter / Inter Tight · Phosphor.
   Questo file sostituisce _ds/nocturne-…/styles.css dei comp:
   contiene SOLO token e componenti base condivisi (.btn, .input).
   Gli stili di pagina restano nel <style> di ogni pagina.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600&display=swap');

:root {
  /* Ground & testo */
  --color-bg: #0a0b13;
  --color-text: #f3f4fa;

  /* Accento blurple */
  --color-accent: #6c63ff;
  --color-accent-100: #c9c8ff;
  --color-accent-200: #a9a6ff;
  --color-accent-300: #8d87ff;
  --color-accent-400: #7b76fa;
  --color-accent-700: #4a3fd6;
  --color-accent-800: #35299f;
  --color-accent-900: #241c72;

  /* Neutri su fondo scuro */
  --color-neutral-100: #d9dce9;
  --color-neutral-200: #aeb3c7;
  --color-neutral-300: #848aa2;
  --color-neutral-400: #6a7089;
  --color-neutral-600: #3a3e55;
  --color-neutral-700: #2c2f42;
  --color-neutral-800: #181a27;
  --color-neutral-900: #101120;

  /* Sezioni piene (fascia CTA) */
  --color-section: #131530;
  --color-section-glow: #4a3ff0;

  /* Tipografia */
  --font-heading: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Geometria & ombre */
  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, 0.6);

  /* Gabbia di pagina */
  --page-max: 1180px;
  --gutter: clamp(24px, 5vw, 76px);
}

html { color-scheme: dark; }
body { margin: 0; background: var(--color-bg); }

/* ---------- Bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1;
  letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease,
              transform .2s ease, box-shadow .2s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-accent); color: #fff;
  box-shadow: 0 6px 24px color-mix(in srgb, var(--color-accent) 35%, transparent);
}
.btn-primary:hover {
  background: var(--color-accent-300); color: #fff;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.btn-secondary {
  background: color-mix(in srgb, var(--color-neutral-800) 66%, transparent);
  border-color: var(--color-neutral-700); color: var(--color-text);
}
.btn-secondary:hover { border-color: var(--color-accent-700); color: var(--color-text); }

.btn-ghost {
  background: transparent; color: var(--color-text);
  border-color: color-mix(in srgb, var(--color-text) 30%, transparent);
}
.btn-ghost:hover { border-color: color-mix(in srgb, var(--color-text) 60%, transparent); color: var(--color-text); }

.btn-block { width: 100%; }

/* ---------- Campi ---------- */
.input {
  width: 100%; box-sizing: border-box;
  padding: 15px 16px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-neutral-800) 72%, transparent);
  border: 1px solid var(--color-neutral-700);
  color: var(--color-text); font-family: var(--font-body); font-size: 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.input::placeholder { color: var(--color-neutral-300); }
.input:focus {
  outline: none; border-color: var(--color-accent-700);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}

/* ---------- Accessibilità di base ---------- */
:focus-visible {
  outline: 2px solid var(--color-accent-200);
  outline-offset: 3px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Tag ---------- */
.tag {
  display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 500; line-height: 1; border: 1px solid transparent;
}
.tag-outline { border-color: var(--color-neutral-700); color: var(--color-neutral-200); }
.tag-accent {
  background: color-mix(in srgb, var(--color-accent) 24%, transparent);
  color: var(--color-accent-100);
}