/* ============================================================
   NomotecnIA · Design Tokens
   Fuente única de verdad visual. Derivado del brand book.
   Un cambio de marca se hace SOLO aquí. (regla WEB.4)
   ============================================================ */

:root {
  /* ---- Colori marca ---- */
  --nero-giuridico: #0E1C16;   /* fondo · autorità */
  --carta:          #F6F3EA;   /* documento */
  --smeraldo:       #00A169;   /* primario · TECN (su fondo chiaro) */
  --smeraldo-bright:#00C385;   /* verde su fondo scuro */
  --smeraldo-scuro: #007043;   /* verde su fondo chiaro alto contrasto */
  --oro-sigillo:    #E4B756;   /* RISERVATO · certificato/conforme (raro, ~3%) */
  --bronzo:         #A56D0F;   /* oro su fondo chiaro (decorativo) */
  --bronzo-testo:   #7A5109;   /* oro LEGGIBILE su chiaro · WCAG AA 5.65:1 */
  --sfondo-base:    #EAE7DF;   /* body */

  /* ---- Stati (governance) ---- */
  --stato-conforme:    #00A169;
  --stato-revisione:   #EBA941;
  --stato-rischio:     #C74B47;
  --stato-nebbia:      #757D78;  /* testo secondario */

  /* ---- Neutri derivati ---- */
  --inchiostro:     #141A17;   /* testo su carta */
  --grigio-testo:   #565B57;   /* corpo secondario */
  --grigio-tenue:   #8A8377;
  --linea:          #E4E1D7;   /* bordi su chiaro */
  --linea-scura:    #22392F;   /* bordi su scuro */
  --superficie:     #FFFFFF;   /* card su chiaro */
  --superficie-scura:#1C2A24;  /* card su scuro */
  --su-scuro-testo: #F6F3EA;
  --su-scuro-tenue: #8FA39A;

  /* ---- Tipografia ---- */
  --font-sans: 'Albert Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scala tipografica fluida (clamp: min · preferita vw · max) */
  --fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 4.5rem);   /* hero H1 */
  --fs-h1:      clamp(2rem, 1.3rem + 3.2vw, 3rem);
  --fs-h2:      clamp(1.6rem, 1.15rem + 2vw, 2.25rem);
  --fs-h3:      clamp(1.2rem, 1rem + 0.9vw, 1.5rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-mono:    0.6875rem;   /* etichette governance (art., ref, ID) */

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.65;

  --tracking-tight: -0.03em;
  --tracking-mono: 0.16em;   /* uppercase mono */

  /* ---- Spaziatura (scala 4px) ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-8: 3rem;     --sp-10: 4rem;
  --sp-12: 5rem;    --sp-16: 7rem;    --sp-20: 9rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 7rem);   /* padding verticale sezioni */

  /* ---- Contenitori ---- */
  --container: 1080px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);

  /* ---- Raggi ---- */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-pill: 999px;

  /* ---- Ombre (sobrie) ---- */
  --shadow-sm: 0 1px 2px rgba(14,28,22,.06);
  --shadow-md: 0 6px 24px rgba(14,28,22,.08);
  --shadow-lg: 0 18px 48px rgba(14,28,22,.14);

  /* ---- Motion (solo transform/opacity/clip-path · regla WEB.0) ---- */
  /* Curve catalogate da aura.ai, adattate all'identità NomotecnIA */
  --ease: cubic-bezier(.22,.61,.36,1);          /* legacy */
  --ease-entrance: cubic-bezier(.22,1,.36,1);   /* contenuto che entra (default premium) */
  --ease-emphasis: cubic-bezier(.16,1,.3,1);    /* hero / reveal ampi */
  --ease-pop:      cubic-bezier(.34,1.56,.64,1); /* SOLO conferme "sigillato ✓" */
  --ease-ui:       cubic-bezier(.4,0,.2,1);      /* hover / stato neutro */
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
  --dur-reveal: 520ms;
  --dur-orbit: 10s;

  /* ---- Materiali (glow / anello-sigillo / vetro) ---- */
  --glow-hero: radial-gradient(60% 45% at 50% 34%, color-mix(in srgb, var(--smeraldo-bright) 12%, transparent), transparent 70%);
  --shell-backdrop: saturate(125%) blur(18px);
  --stagger: 64ms;   /* ritardo tra fratelli in reveal scaglionato */

  /* ---- z-index ---- */
  --z-nav: 100;  --z-overlay: 200;  --z-modal: 300;
}

/* Custom property tipizzata per l'anello conico rotante (@property, GPU-safe) */
@property --ring-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}