/* ============================================================
   NomotecnIA · Base + componenti fondamentali
   ============================================================ */

/* ---- Reset essenziale ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--inchiostro);
  background: var(--sfondo-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
:focus-visible { outline: 2px solid var(--smeraldo-scuro); outline-offset: 3px; border-radius: 3px; }
.section--scuro :focus-visible { outline-color: var(--smeraldo-bright); }
::selection { background: var(--smeraldo-bright); color: var(--nero-giuridico); }

/* ---- Tipografia ---- */
h1, h2, h3 { line-height: var(--lh-heading); font-weight: 800; letter-spacing: var(--tracking-tight); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p { max-width: 68ch; }

/* ---- Layout ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }
.section + .section { border-top: 1px solid var(--linea); }
.section--scuro { background: var(--nero-giuridico); color: var(--su-scuro-testo); border-top-color: var(--linea-scura); }
.section--scuro h1, .section--scuro h2, .section--scuro h3 { color: var(--su-scuro-testo); }
.section--scuro p { color: var(--su-scuro-tenue); }

/* ---- Etichetta mono (governance: art., ref, ID, kicker) ---- */
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--smeraldo-scuro);   /* WCAG AA: 5.0:1 su chiaro (era 2.70:1) */
}
.section--scuro .mono-label { color: var(--smeraldo-bright); }

/* ---- Numero di sezione ---- */
.section-index { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--smeraldo-scuro); letter-spacing: .1em; }
.section--scuro .section-index { color: var(--smeraldo-bright); }

/* ---- Bottoni (premium: stato per luminanza/glow, MAI scale · aura.ai §1.7) ---- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .85em 1.5em;
  font-weight: 600; font-size: var(--fs-small);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease-ui), color var(--dur-fast) var(--ease-ui), box-shadow var(--dur) var(--ease-ui), border-color var(--dur) var(--ease-ui);
}
.btn:active { transform: translateY(1px); transition: transform 60ms linear; }  /* solo pulsazione, no crescita */
.btn--primary { background: var(--smeraldo); color: #fff; }
.btn--primary:hover { background: var(--smeraldo-scuro); box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--smeraldo) 55%, transparent); }
.section--scuro .btn--primary { background: var(--carta); color: var(--nero-giuridico); }             /* pillola chiara su scuro (aura.ai) */
.section--scuro .btn--primary:hover { background: #fffdf8; box-shadow: 0 6px 22px -8px color-mix(in srgb, var(--smeraldo-bright) 45%, transparent); }
.btn--ghost { background: transparent; color: currentColor; border-color: color-mix(in srgb, currentColor 40%, transparent); }
.btn--ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); border-color: currentColor; }

/* ---- Sistema di SIGILLI di conformità (la FIRMA · governance visibile §6) ---- */
/* Etichetta mono che "sigilla" una sezione/dato: 🟢 GOVERNED · art.26 · CONFORME · VERIFICATO */
.seal {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3em .7em .3em .55em;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--oro-sigillo) 40%, var(--linea));
  color: var(--bronzo-testo);
  background: color-mix(in srgb, var(--oro-sigillo) 8%, var(--superficie));
  white-space: nowrap;
}
.seal::before {                                   /* pastiglia di stato */
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--stato-conforme); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stato-conforme) 18%, transparent);
}
.section--scuro .seal { color: var(--oro-sigillo); border-color: color-mix(in srgb, var(--oro-sigillo) 42%, transparent); background: color-mix(in srgb, var(--oro-sigillo) 10%, transparent); }
.seal--verificato::before { background: var(--smeraldo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--smeraldo) 18%, transparent); }
.seal--revisione::before  { background: var(--stato-revisione); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stato-revisione) 20%, transparent); }
/* "stamp-in" una volta all'entrata (intenzione: conformità sigillata, NON decorazione perpetua) */
.reveal.is-visible .seal, .seal.is-sealed { animation: seal-stamp var(--dur) var(--ease-pop) both; }
@keyframes seal-stamp { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }

/* Chip di stato governance (obblighi deployer §6.1) */
.chip { display: inline-flex; align-items: center; gap: .45em; font-size: var(--fs-small); font-weight: 500; padding: .4em .8em; border-radius: var(--r-pill); border: 1px solid var(--linea); background: var(--superficie); }
.chip::before { content: "✓"; color: var(--stato-conforme); font-weight: 700; }
.chip--rev::before { content: "!"; color: var(--stato-revisione); }
.section--scuro .chip { background: var(--superficie-scura); border-color: var(--linea-scura); color: var(--su-scuro-testo); }

/* ---- Card (bisello 1px caldo · luce cenitale · aura.ai §1.3) ---- */
.card {
  background:
    linear-gradient(180deg, #fffefb, var(--superficie)) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--linea) 90%, #fff), color-mix(in srgb, var(--linea) 55%, transparent)) border-box;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  box-shadow: 0 1px 2px rgba(14,28,22,.04), 0 10px 28px -14px rgba(14,28,22,.12);   /* ombre verde-nero, non nero puro */
  transition: transform var(--dur) var(--ease-ui), box-shadow var(--dur) var(--ease-ui), border-color var(--dur) var(--ease-ui);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(14,28,22,.05), 0 18px 40px -16px rgba(14,28,22,.18); }
.section--scuro .card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--superficie-scura) 88%, #fff 4%), var(--superficie-scura)) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--linea-scura) 130%, #fff 6%), var(--linea-scura)) border-box;
}
.section--scuro .card:hover { box-shadow: 0 14px 36px -14px rgba(0,0,0,.5); }

/* ---- Dispositivo "La Squadra": cornice ad angoli in oro ---- */
.squadra { position: relative; }
.squadra::before, .squadra::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  border: 2.5px solid var(--oro-sigillo); pointer-events: none;
}
.squadra::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.squadra::after { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

/* ---- Accessibilità: skip link ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-modal);
  background: var(--nero-giuridico); color: #fff; padding: .75em 1.25em; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---- Utilità ---- */
.text-oro { color: var(--oro-sigillo); }
.text-smeraldo { color: var(--smeraldo); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Reveal on scroll (opacity/transform · GPU-safe · aura.ai §1.8) ---- */
.reveal { opacity: 0; transform: translate3d(0,14px,0); transition: opacity var(--dur-reveal) var(--ease-entrance), transform var(--dur-reveal) var(--ease-entrance); }
.reveal.is-visible { opacity: 1; transform: translateZ(0); }
/* Scaglionamento tra fratelli di uno stesso gruppo (data-stagger sul contenitore) */
[data-stagger].is-visible > * { animation: item-in var(--dur-reveal) var(--ease-entrance) both; }
[data-stagger].is-visible > *:nth-child(1){animation-delay:0ms}
[data-stagger].is-visible > *:nth-child(2){animation-delay:calc(var(--stagger)*1)}
[data-stagger].is-visible > *:nth-child(3){animation-delay:calc(var(--stagger)*2)}
[data-stagger].is-visible > *:nth-child(4){animation-delay:calc(var(--stagger)*3)}
[data-stagger].is-visible > *:nth-child(5){animation-delay:calc(var(--stagger)*4)}
[data-stagger].is-visible > *:nth-child(6){animation-delay:calc(var(--stagger)*5)}
@keyframes item-in { from { opacity:0; transform: translate3d(0,14px,0); } to { opacity:1; transform: translateZ(0); } }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  [data-stagger].is-visible > * { animation: none; }
}