/* ============================================================
   CROMA — Gestionale · 2. BASE
   Reset leggero, tipografia di base, scrollbar, animazioni,
   utility riusabili. Niente colori assoluti: solo token.
   ============================================================ */

* { box-sizing: border-box; }

/* — Scala globale: su schermi grandi (2K+) aumenta il rem base così
   tipografia E spaziature (tutte in rem) crescono in modo proporzionale,
   dando più respiro senza ridisegnare i singoli componenti. — */
html { font-size: 16px; }
@media (min-width: 1600px) { html { font-size: 17px; } }
@media (min-width: 1920px) { html { font-size: 18px; } }
@media (min-width: 2300px) { html { font-size: 19px; } }
@media (min-width: 2800px) { html { font-size: 20px; } }

html, body {
  margin: 0;
  height: 100%;
  background: var(--cg-bg);
}

body {
  font-family: var(--font-sans);
  font-size: var(--regular-text);
  line-height: var(--leading-normal);
  color: var(--cg-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}

button { font: inherit; color: inherit; }
input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }

/* — Scrollbar discreta — */
::-webkit-scrollbar { width: 0.625rem; height: 0.625rem; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--cg-ink), 0.14);
  border-radius: 0.5rem;
  border: 0.125rem solid var(--cg-bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--cg-ink), 0.24); }
::-webkit-scrollbar-track { background: transparent; }

::placeholder { color: rgba(var(--cg-ink), 0.34); }
select option { background: var(--cg-raised); color: var(--cg-text); }

:focus-visible {
  outline: 0.125rem solid var(--c-purple);
  outline-offset: 0.125rem;
}

/* — Icone Lucide —
   Lucide sostituisce <i data-lucide> con un <svg class="lucide" width="24">.
   Dimensione in em così l'icona scala con la dimensione del testo del contesto;
   il CSS vince sugli attributi width/height="24" del markup generato. */
[data-lucide], svg.lucide {
  width: 1.1em;
  height: 1.1em;
  stroke-width: 1.6;
  flex: none;
  vertical-align: middle;
}
/* Negli wrapper "tight" (la cui dimensione È quella dell'icona) l'svg riempie il box.
   I container-bottone più grandi (iconbtn, hamburger, close…) NON sono qui:
   lì l'icona resta a dimensione em e viene centrata dal flex del bottone. */
.cg-navbtn__icon svg.lucide,
.cg-section__arrow svg.lucide,
.cg-account__cog svg.lucide { width: 100%; height: 100%; }

/* ----------------------------------------------------------
   Animazioni
   ---------------------------------------------------------- */
@keyframes cg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cg-rise { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes cg-slide { from { transform: translateX(1.75rem); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes cg-pop { from { transform: scale(0.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes cg-droppulse {
  0%   { box-shadow: 0 0 0 0 rgba(151, 136, 255, 0.55); }
  100% { box-shadow: 0 0 0 0.625rem rgba(151, 136, 255, 0); }
}

.cg-view { animation: cg-rise var(--t-slow) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ----------------------------------------------------------
   Utility minime (uso parsimonioso)
   ---------------------------------------------------------- */
.cg-row { display: flex; align-items: center; }
.cg-spacer { flex: 1 1 auto; }
.cg-truncate { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-hidden { display: none !important; }