/* OneContext, token di stile.
   Tema scuro predefinito, tema chiaro su html[data-theme="light"].
   Palette teal e ambra del marchio InfraCore, piu' i colori dei temi del grafo.
   Un solo file di token: colori, spazi, raggi, ombre, tempi, tipografia. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../vendor/fonts/inter-latin-var.woff2') format('woff2');
}

:root {
  color-scheme: dark;

  /* fondo e superfici */
  --bg: #0a0f12;
  --bg-deep: #060a0c;
  --surface: rgba(255, 255, 255, 0.032);
  --surface-strong: rgba(255, 255, 255, 0.062);
  --glass: rgba(8, 12, 14, 0.62);
  --pop-bg: rgba(15, 21, 25, 0.96);
  --drawer-bg: #0d1316;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --ring: rgba(255, 255, 255, 0.08);

  /* testo */
  --text: #e8eef0;
  --text-soft: #9fb0b5;
  --text-faint: #6b7b80;
  --on-accent: #06110f;

  /* accenti */
  --teal: #37c8b4;
  --teal-deep: #0f6f66;
  --teal-soft: rgba(55, 200, 180, 0.14);
  --amber: #efa84a;
  --amber-deep: #8a5a1c;
  --amber-soft: rgba(239, 168, 74, 0.14);
  --alert: #e2685f;

  /* stati delle affermazioni */
  --state-proposta: var(--amber);
  --state-confermata: var(--teal);
  --state-superata: var(--text-faint);

  /* temi del grafo (comunita' Louvain), in ordine di id */
  --tema-0: #37c8b4;
  --tema-1: #efa84a;
  --tema-2: #a78bfa;
  --tema-3: #5ab8ff;
  --tema-4: #f27a9b;
  --tema-5: #b8d95a;
  --tema-6: #f0845c;
  --tema-7: #7fd8a3;

  /* grafo: fondo delle etichette, archi */
  --graph-halo: rgba(6, 10, 12, 0.85);
  --graph-edge: rgba(200, 220, 225, 1);
  --graph-glow: 0.55;
  /* riservato ai nodi e agli archi appena entrati: nessun tema lo usa */
  --graph-nuovo: #ff4fd1;

  /* campo di fondo: i tre gradienti radiali */
  --field-1: rgba(55, 200, 180, 0.16);
  --field-2: rgba(239, 168, 74, 0.11);
  --field-3: rgba(15, 111, 102, 0.22);

  /* spazi */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  /* raggi */
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 20px;
  --r-pill: 999px;

  /* ombre e superfici in gradiente */
  --card-grad: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015) 55%, rgba(255, 255, 255, 0.03));
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --pop-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.06);

  /* tempi */
  --fast: 140ms;
  --slow: 420ms;
  --drift: 34s;
  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);

  /* tipografia */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Cascadia Code', 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --t-xs: 11px;
  --t-s: 13px;
  --t-m: 15px;
  --t-l: 19px;
  --t-xl: 28px;
  --t-xxl: 40px;
  --track-tight: -0.02em;
  --track-wide: 0.08em;
}

/* Tema chiaro: stessi nomi, valori piu' profondi per tenere il contrasto
   sul fondo chiaro. I colori dei temi del grafo scendono di un tono. */
:root[data-theme='light'] {
  color-scheme: light;

  --bg: #eef1f3;
  --bg-deep: #e4e9ec;
  --surface: rgba(255, 255, 255, 0.62);
  --surface-strong: rgba(255, 255, 255, 0.92);
  --glass: rgba(240, 243, 245, 0.72);
  --pop-bg: rgba(255, 255, 255, 0.97);
  --drawer-bg: #f6f8f9;
  --line: rgba(10, 30, 35, 0.09);
  --line-strong: rgba(10, 30, 35, 0.16);
  --ring: rgba(10, 30, 35, 0.07);

  --text: #101a1e;
  --text-soft: #4f6168;
  --text-faint: #7d8d93;
  --on-accent: #ffffff;

  --teal: #0f9c8b;
  --teal-deep: #0a6a60;
  --teal-soft: rgba(15, 156, 139, 0.12);
  --amber: #c77d17;
  --amber-deep: #8a5410;
  --amber-soft: rgba(199, 125, 23, 0.12);
  --alert: #c8443b;

  --tema-0: #0f9c8b;
  --tema-1: #c77d17;
  --tema-2: #7c5cf0;
  --tema-3: #1f86e0;
  --tema-4: #d9456f;
  --tema-5: #7a9a1c;
  --tema-6: #d95a30;
  --tema-7: #2f9c62;

  --graph-halo: rgba(238, 241, 243, 0.9);
  --graph-edge: rgba(40, 60, 66, 1);
  --graph-glow: 0.28;
  --graph-nuovo: #c4128f;

  --field-1: rgba(15, 156, 139, 0.14);
  --field-2: rgba(199, 125, 23, 0.10);
  --field-3: rgba(15, 111, 102, 0.12);

  --card-grad: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0.86));
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 32px -22px rgba(16, 32, 40, 0.35), 0 0 0 1px rgba(10, 30, 35, 0.04);
  --pop-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 24px 60px -24px rgba(16, 32, 40, 0.45), 0 0 0 1px rgba(10, 30, 35, 0.07);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-m);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  accent-color: var(--teal);
  caret-color: var(--teal);
}

button,
input {
  font: inherit;
  color: inherit;
}

a {
  color: var(--teal);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

::selection {
  background: var(--teal-soft);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

[hidden] {
  display: none !important;
}

/* I tre gradienti radiali in deriva lenta: il fondo si muove appena. */
.field {
  position: fixed;
  inset: -6%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52vw 52vw at 12% 8%, var(--field-1), transparent 62%),
    radial-gradient(44vw 44vw at 88% 22%, var(--field-2), transparent 60%),
    radial-gradient(60vw 60vw at 50% 108%, var(--field-3), transparent 66%),
    var(--bg-deep);
  animation: drift var(--drift) ease-in-out infinite alternate;
  transition: background var(--slow);
}

@keyframes drift {
  from {
    transform: translate3d(-1.5%, -1%, 0) scale(1.02);
  }
  to {
    transform: translate3d(1.5%, 1.5%, 0) scale(1.06);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.rise {
  animation: rise var(--slow) var(--ease) both;
}

.card {
  background-image: var(--card-grad);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--card-shadow);
  padding: var(--s5);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 12px var(--teal);
  flex: none;
}

.dot.waiting {
  background: var(--amber);
  box-shadow: 0 0 12px var(--amber);
}

.mono {
  font-family: var(--mono);
  font-size: var(--t-s);
}

.eyebrow {
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
}

/* icone a tratto */
.ic {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: -3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .field,
  .rise {
    animation: none;
  }
}