/* ============================================================
   TOKEN DI DESIGN

   Un solo blocco per entrambe le modalità: light-dark() sceglie il valore
   in base a color-scheme, quindi non serve ripetere la palette in
   @media (prefers-color-scheme) e in [data-theme].
     · nessun attributo   -> segue il sistema
     · data-theme=light   -> forza la modalità chiara
     · data-theme=dark    -> forza la modalità scura
   Il tema colore è indipendente: cambia solo --accent e --accent-2,
   tutti gli altri token ne derivano con color-mix.
   ============================================================ */
:root {
  color-scheme: light dark;

  --bg: light-dark(#F1F5F2, #050A08);
  --bg-2: light-dark(#E6ECE8, #08100D);
  --panel: light-dark(rgba(255, 255, 255, .74), rgba(255, 255, 255, .045));
  --panel-2: light-dark(rgba(255, 255, 255, .92), rgba(255, 255, 255, .075));
  --panel-solid: light-dark(#FFFFFF, #0C1512);
  --line: light-dark(rgba(6, 32, 22, .10), rgba(255, 255, 255, .09));
  --line-2: light-dark(rgba(6, 32, 22, .20), rgba(255, 255, 255, .17));
  --text: light-dark(#06150F, #E9F3ED);
  --text-muted: light-dark(#4C6157, #8FA79A);
  --text-soft: light-dark(#7B9086, #5B7167);
  --grid-line: light-dark(rgba(6, 32, 22, .045), rgba(255, 255, 255, .032));

  --accent: #4ADE9B;
  --accent-2: #22D3EE;
  --accent-ink: #03120C;

  /* Sul fondo chiaro l'accento va scurito per restare leggibile. */
  --accent-text: light-dark(color-mix(in srgb, var(--accent) 58%, #04231A), var(--accent));
  --accent-2-text: light-dark(color-mix(in srgb, var(--accent-2) 58%, #04231A), var(--accent-2));
  --accent-wash: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 38%, transparent);

  --ok: light-dark(#0F9D63, #4ADE9B);
  --warn: light-dark(#B0740B, #FBBF24);
  --crit: light-dark(#D6455C, #FB7185);

  --glow-s: 0 0 22px -7px color-mix(in srgb, var(--accent) 58%, transparent);
  --glow-m: 0 18px 56px -24px color-mix(in srgb, var(--accent) 72%, transparent);
  --shadow: 0 22px 55px -30px light-dark(rgba(6, 32, 22, .42), rgba(0, 0, 0, .9));

  --r-s: 12px;
  --r-m: 18px;
  --r-l: 26px;
  --r-xl: 34px;
  --f-display: 'Syne', 'Trebuchet MS', sans-serif;
  --f-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* Scelta esplicita dell'utente: basta cambiare color-scheme, i token seguono. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Questi tre non sono colori, quindi light-dark() non li copre. */
:root {
  --canvas-op: .72;
  --grain-op: .32;
  --grain-blend: overlay;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --canvas-op: .5; --grain-op: .2; --grain-blend: multiply; }
}

:root[data-theme="light"] { --canvas-op: .5; --grain-op: .2; --grain-blend: multiply; }

/* Palette selezionabili — elenco in Configuration/AppThemes.cs */
[data-app-theme="clorofilla"] { --accent: #4ADE9B; --accent-2: #22D3EE; }
[data-app-theme="nebulosa"]   { --accent: #A78BFA; --accent-2: #F472B6; }
[data-app-theme="solare"]     { --accent: #FBBF24; --accent-2: #FB7185; }
[data-app-theme="abisso"]     { --accent: #38BDF8; --accent-2: #818CF8; }

/* ============================================================ BASE */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .35s ease, color .35s ease;
}

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: none; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

code {
  font-family: var(--f-mono);
  font-size: .875em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
}

::selection { background: var(--accent); color: var(--accent-ink); }

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.ico svg {
  width: 1.15em;
  height: 1.15em;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.is-muted { color: var(--text-muted); }
.is-ok { color: var(--ok); }
.is-crit { color: var(--crit); }

/* ============================================================ SFONDO */
#ambient-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

#ambient {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  opacity: var(--canvas-op);
  transition: opacity .4s ease;
}

#ambient-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 78%);
}

#ambient-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--grain-op);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.screen, .shell { position: relative; z-index: 1; }

/* ============================================================ ELEMENTI BASE */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9375rem;
  cursor: pointer;
  letter-spacing: -.01em;
  white-space: nowrap;
  position: relative;
  transition: transform .16s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.btn:active { transform: scale(.975); }

.btn-primary {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  box-shadow: var(--glow-m);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 70px -20px color-mix(in srgb, var(--accent) 85%, transparent);
}

.btn-glass {
  background: var(--panel);
  border: 1px solid var(--line-2);
  color: var(--text);
  backdrop-filter: blur(14px);
}

.btn-glass:hover { border-color: var(--accent-line); background: var(--panel-2); transform: translateY(-2px); }

.btn-sm { padding: 9px 17px; font-size: .8438rem; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 11px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  color: var(--accent-text);
}

.tag-sm { padding: 5px 12px 5px 9px; font-size: .6875rem; }

.tag .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
  animation: nz-pulse 2.4s ease-in-out infinite;
}

@keyframes nz-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.grad {
  background: linear-gradient(100deg, var(--accent-text), var(--accent-2-text));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glass {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}

/* Alone che segue il puntatore, alimentato da js/theme.js */
.spot { transition: border-color .3s ease, transform .3s cubic-bezier(.2, .8, .3, 1); }

.spot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}

.spot:hover::before { opacity: 1; }
.spot:hover { border-color: var(--accent-line); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  color: var(--text);
}

.mark {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--glow-s);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mark svg {
  width: 17px;
  height: 17px;
  stroke: var(--accent-ink);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.avt {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  font-family: var(--f-mono);
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.avt-sm { width: 30px; height: 30px; border-radius: 10px; font-size: .6875rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  html { scroll-behavior: auto; }
}