/* Instantia — Base layer (token + primitivi universali) */
/* Caricato su OGNI pagina PRIMA di app.css o degli <style> locali.            */
/* Layout-agnostic: niente body/sidebar/componenti — solo fondamenta condivise. */

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

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  --bg:         #060b18;
  --bg-2:       #0c1424;
  --bg-card:    #101d30;
  --bg-raised:  #14223a;
  --border:     #1b2f4a;
  --border-2:   #253e5e;

  --accent:     #7c3aed;
  --accent-2:   #db2777;
  --accent-dim: rgba(124,58,237,.12);

  --text-1: #f1f5f9;
  --text-2: #cbd5e1;
  --text-3: #94a3b8;
  --text-4: #475569;

  --green:     #10b981; --green-bg: #022c22; --green-border: #065f46;
  --yellow:    #f59e0b; --yellow-bg: #1a1000; --yellow-border: #78350f;
  --red:       #f87171; --red-bg: #420a0a; --red-border: #7f1d1d;
  --blue:      #60a5fa; --blue-bg: #071530; --blue-border: #1e3a8a;
  --purple:    #c4b5fd; --purple-bg: var(--accent-dim); --purple-border: rgba(124,58,237,.3);

  --sidebar-w: 236px;
  --r: 10px; --r-sm: 6px; --r-lg: 14px; --r-xl: 18px;

  /* Motion — easing curves + durate coerenti */
  --ease:     cubic-bezier(.4, 0, .2, 1);     /* standard (entra/esce) */
  --ease-out: cubic-bezier(.16, 1, .3, 1);    /* decel marcata (overlay/lift) */
  --t:      160ms var(--ease);
  --t-fast: 110ms var(--ease);
  --t-slow: 260ms var(--ease);

  /* Elevazione — scala ombre per tema scuro */
  --shadow-sm:   0 1px 2px rgba(0,0,0,.30);
  --shadow-md:   0 4px 14px rgba(0,0,0,.32), 0 1px 3px rgba(0,0,0,.24);
  --shadow-lg:   0 16px 40px rgba(0,0,0,.50), 0 4px 12px rgba(0,0,0,.30);
  --shadow-glow: 0 4px 18px rgba(124,58,237,.40);

  /* Spaziatura — scala su base 4px */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;  --s-8: 3rem;
}

/* ── Reset minimo ────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Selezione testo brandizzata ─────────────────────────────────────────── */
::selection { background: rgba(124,58,237,.32); color: #fff; }

/* ── Scrollbar tematizzata (no barra bianca di sistema su tema scuro) ─────── */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-2); border-radius: 99px;
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background: #2f4d70; }

/* ── Focus visible (tastiera) ────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* i campi gestiscono il proprio ring */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* ── Cursor pointer su elementi interattivi generici ─────────────────────── */
button, [role="button"], label[for], a[href], summary { cursor: pointer; }

/* ── iOS Safari zooma sui campi < 16px al focus → forziamo 16px su mobile ─── */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="time"], input[type="url"],
  select, textarea { font-size: 16px; }
}

/* ── prefers-reduced-motion: spegne animazioni/transizioni ───────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}