/* =============================================================================
   MiCCard — DESIGN TOKENS
   =============================================================================

   ⚠️  QUESTO È L'UNICO FILE DEL PROGETTO IN CUI PUÒ COMPARIRE UN VALORE GRAFICO.

   Nessun altro CSS e nessun template devono contenere colori, font o misure
   scritti a mano: usano i token semantici dello STRATO 2. Un test di build
   (TemplatesGuardTest) fallisce se la regola viene violata nei
   template.

   Perché tanta insistenza: la veste grafica del sito cambierà per ragioni di
   comunicazione. Con questa struttura il cambio costa la riscrittura dello
   STRATO 1 — una cinquantina di righe — invece di una revisione di tutti i
   template. Vedi docs/implementazione/E4/E4 - Sito pubblico e area riservata.md.

   Origine dei valori: docs/design/E4/design-tokens.css (handoff Claude Design),
   riconciliato con site.css, che nell'handoff usava nomi diversi per gli stessi
   colori.
   ============================================================================= */

:root {

  /* ==========================================================================
     STRATO 1 — LA VESTE
     Gli unici valori concreti del progetto. Per cambiare veste si riscrive
     QUESTO blocco e nient'altro.
     ========================================================================== */

  /* Colori del marchio */
  --mic-black:         #111111;
  --mic-gold:          #c99230;
  /* #c08a29 e non #b9822a: i due file dell'handoff divergevano su questo valore
     (site.css contro design-tokens.css). Vince site.css, che è il foglio contro
     cui le pagine del wireframe sono effettivamente montate. */
  --mic-gold-dark:     #c08a29;
  --mic-gold-soft:     #e7b46a;
  --mic-yellow:        #ffd21a;
  --mic-yellow-deep:   #e7a91b;
  --mic-yellow-bright: #ffe200;
  --mic-amber:         #f4c430;
  --mic-amber-warm:    #f1b73a;
  --mic-amber-deep:    #efb02f;
  --mic-amber-ring:    #6b5010;
  --mic-orange:        #d98a1f;
  --mic-cream:         #faf3e2;
  --mic-cream-line:    #ecdcb4;

  /* Neutri */
  --mic-ink:           #1c1c1c;
  --mic-text-strong:   #2b2b2b;
  --mic-text-body:     #333333;
  --mic-text-soft:     #555555;
  --mic-muted:         #6b6b6b;
  --mic-muted-soft:    #777777;
  --mic-faint:         #888888;
  --mic-hint:          #999999;
  --mic-bg:            #f4f4f3;
  --mic-surface:       #ffffff;
  /* Il velo scuro dei comandi del carosello: nero al 55%, come nel wireframe.
     Sta fra le primitive e non fra i semantici perché è una TINTA, non un
     ruolo. */
  --mic-veil-dark:     rgba(17, 17, 17, .55);
  /* Slider della home (M4.13, handoff «Nuovo slider rosa»): il nero di CTA e
     comandi, e il bianco del loro testo. */
  --mic-ink-deep:      #1a1a1a;
  --mic-white:         #ffffff;
  --mic-surface-alt:   #f7f6f4;
  --mic-surface-bar:   #f0efec;
  --mic-line:          #e6e3dc;
  --mic-line-soft:     #eeeeee;
  --mic-line-bar:      #dddbd5;


  /* La card con i dati dell'area riservata: i valori di «Il mio profilo»
     dell'as-is, misurati il 2026-10-05. L'artwork e' un'immagine. */
  --mic-card-panel:       rgba(255, 255, 255, .84);
  --mic-card-label:       #c80850;
  --mic-card-attiva:      #2fd01e;
  --mic-card-scaduta:     #ff0000;
  --mic-card-shadow:      rgba(45, 53, 89, .5);
  --mic-card-panel-shadow: #000000;

  /* Semaforo */
  --mic-red:           #e11d1d;
  --mic-danger:        #c0392b;
  --mic-danger-soft:   #fdf0ee;
  --mic-danger-line:   #e8c4bd;
  --mic-success:       #6ba32f;
  --mic-success-soft:  #f1f7ea;
  --mic-success-line:  #cfe2ba;

  /* I form della registrazione (M4.8, Blocco 0-P §4.2 del nuovo handoff).
     Sono le tinte che i frame REG_* aggiungono alla palette: superfici tenui
     per la riga radio selezionata e il consenso obbligatorio, il rosso scuro
     del riepilogo errori, il verde del «codice inviato», i grigi del bottone
     disabilitato e in invio. */
  --mic-gold-surface:  #fbf7ef;
  --mic-sand:          #f7f4ec;
  --mic-sand-strong:   #f3e9d4;
  --mic-sand-text:     #8a6417;
  --mic-gold-line:     #d8be84;
  --mic-neutral-surface: #fafafb;
  --mic-danger-dark:   #8e2a1e;
  --mic-danger-surface: #fdf4f3;
  --mic-danger-field:  #fffbfa;
  --mic-danger-line-form: #e7b9b3;
  --mic-success-text:  #1e7a4c;
  --mic-success-surface: #e8f4ec;
  --mic-disabled-bg:   #e2dcce;
  --mic-disabled-fg:   #6b6353;
  --mic-disabled-line: #dde1e5;
  --mic-disabled-text: #9aa5b0;
  --mic-loading-bg:    #cbb07a;

  /* La mappa dei luoghi (M4.12, handoff Luoghi e Convenzioni del 2026-09-25).
     Le tinte che la sezione aggiunge: il blu della posizione dell'utente (spec
     §8, «distinto dai pin»), il fondo della mappa prima che arrivi, il bordo dei
     campi di ricerca e ordinamento, i separatori interni del popup e del
     dettaglio, il grigio scuro delle icone social al passaggio, e il fondo
     tenue del bottone «Mostra di più» al passaggio. */
  --mic-blue:          #2f6fb0;
  --mic-blue-halo:     rgba(47, 111, 176, .18);
  --mic-map-bg:        #eef0ec;
  --mic-input-line:    #cfccc4;
  --mic-line-inner:    #ebe9e5;
  --mic-ink-soft:      #444444;
  --mic-cream-hover:   #fff8ec;

  /* Testo su fondi scuri o colorati */
  --mic-on-dark:       #ffffff;
  --mic-on-gold:       #141414;
  --mic-on-gold-soft:  #5c4110;

  /* Tipografia */
  --mic-font-sans:  "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mic-font-serif: "Playfair Display", Georgia, serif;

  /* Forme */
  --mic-radius:      6px;
  --mic-radius-card:   18px;
  --mic-radius-sm:   3px;
  --mic-radius-pill: 24px;
  --mic-radius-foto: 50px;
  --mic-shadow-card: 0 2px 10px rgba(0, 0, 0, .08);
  --mic-shadow-lg:   0 12px 30px rgba(0, 0, 0, .16);
  --mic-shadow-nav:  0 12px 24px rgba(0, 0, 0, .12);

  /* Misure di impaginazione */
  --mic-maxw:       1120px;
  --mic-maxw-wide:  1160px;
  --mic-gutter:     28px;
  --mic-topbar-h:   38px;
  --mic-nav-h:      80px;


  /* ==========================================================================
     STRATO 2 — IL SIGNIFICATO
     Questi nomi dicono a COSA serve il colore, non che colore è. Restano validi
     attraverso i cambi di veste, ed è quello che il resto del CSS deve usare.
     ========================================================================== */

  /* Superfici e testo */
  --color-surface-page:    var(--mic-bg);
  --color-surface:         var(--mic-surface);
  --color-surface-alt:     var(--mic-surface-alt);
  --color-surface-bar:     var(--mic-surface-bar);
  --color-text:            var(--mic-ink);
  --color-text-strong:     var(--mic-text-strong);
  --color-text-body:       var(--mic-text-body);
  --color-text-soft:       var(--mic-text-soft);
  --color-text-muted:      var(--mic-muted);
  --color-text-faint:      var(--mic-muted-soft);
  --color-text-hint:       var(--mic-hint);
  --color-text-disabled:   var(--mic-faint);
  --color-border:          var(--mic-line);
  --color-border-soft:     var(--mic-line-soft);

  /* Azioni */
  --color-action-primary:      var(--mic-gold);
  --color-on-action-primary:   var(--mic-on-dark);
  --color-action-secondary:    var(--mic-black);
  --color-on-action-secondary: var(--mic-on-dark);
  --color-action-tertiary:     var(--mic-amber);
  --color-on-action-tertiary:  var(--mic-black);
  --color-action-danger:       var(--mic-danger);
  --color-on-action-danger:    var(--mic-on-dark);
  /* Bottone chiaro («Prenota ora!») al passaggio, come nell'handoff */
  --color-chiaro-hover:        var(--mic-cream-hover);
  --color-chiaro-hover-line:   var(--mic-gold-line);

  /* Accento: link, parole evidenziate, sottolineatura della voce attiva */
  --color-accent:          var(--mic-orange);
  --color-accent-hover:    var(--mic-gold-dark);

  /* Barra nera in cima */
  --color-topbar:          var(--mic-black);
  --color-on-topbar:       var(--mic-on-dark);

  /* Banner di intestazione pagina */
  --color-banner:          var(--mic-gold);
  --color-on-banner:       var(--mic-on-gold);
  --color-on-banner-muted: var(--mic-on-gold-soft);

  /* Fascia della Gift Card (M4.4).

     L'oro tenue è il fondo che il wireframe dà alla sezione «Regala la Gift
     Card» di gift.html, e l'unico punto del sito pubblico con quel colore.
     ⚠️ Il testo sopra NON è il nero del corpo: su questo fondo il contrasto
     scenderebbe sotto la soglia, e il bruno profondo — che è già il colore del
     testo sul banner oro — dà 5,4:1. È il genere di cosa che in questa EPIC si
     è già sbagliata tre volte, e si misura invece di guardarla. */
  --color-band-gift:       var(--mic-gold-soft);
  --color-on-band-gift:    var(--mic-on-gold-soft);

  /* Marchio: da M4.11 e' il logo ufficiale (img/logo-mic-card.png), e i tre
     token della «M» disegnata in CSS sono stati tolti. */

  /* Titoli in oro delle sezioni di contenuto */
  --color-heading-gold:    var(--mic-gold-dark);

  /* Hero della home */
  --color-hero-from:       var(--mic-gold);
  --color-hero-to:         var(--mic-gold-dark);
  --color-on-hero:         var(--mic-on-gold);
  /* M4.13: CTA nera con testo bianco, raggio 3px (handoff §3). */
  --color-hero-cta:        var(--mic-ink-deep);
  --color-on-hero-cta:     var(--mic-white);
  --radius-hero-cta:       3px;

  /* Carosello (M6.5).

     ⚠️ QUI C'ERA `--color-on-hero-hi`, il colore della riga evidenziata del
     titolo, e non c'è più: nella quarta tornata il titolo è diventato UN
     CAMPO SOLO, quindi non esiste più una «seconda riga» da colorare. Il
     token è stato tolto invece di lasciato inerte: un colore definito e non
     usato sopravvive ai re-skin e prima o poi qualcuno lo riusa per caso. */
  /* `--color-on-hero-kicker` (il bruno dell'occhiello) e i due token del badge
     sono stati tolti nella seconda tornata di M4.13: l'occhiello prende il
     colore del titolo, e il badge non c'e' piu'. */
  /* M4.13: frecce e pausa piene, nere, su qualunque sfondo. */
  --color-hero-comando:    var(--mic-ink-deep);
  /* Il velo dietro un <dialog> aperto (M5.2): lo stesso scuro dei comandi dell'hero. */
  --color-veil:            var(--mic-veil-dark);
  --color-on-hero-comando: var(--mic-white);
  /* Il colore dei pallini quando la slide non ne sceglie uno (il redattore
     li colora insieme ai testi, M4.13 D2). */
  --color-hero-pallino:    var(--mic-on-gold);

  /* Le tre schede di azione (Acquista / Rinnova / Regala) */
  --color-card-action:      var(--mic-amber-warm);
  --color-card-action-alt:  var(--mic-amber-deep);
  --color-on-card-action:   var(--mic-amber-ring);
  --color-card-action-ring: var(--mic-amber-ring);

  /* Riquadro di richiamo */
  --color-notice:          var(--mic-cream);
  --color-notice-border:   var(--mic-cream-line);

  /* ⚠️ Da M4.11 non ci sono piu' segnaposto di asset: loghi e immagini sono
     arrivati, e i quattro grigi tratteggiati sono stati tolti. */

  /* La card con i dati (riservata.css) */
  --color-card-surface:      var(--mic-white);
  --color-card-panel:        var(--mic-card-panel);
  --color-card-label:        var(--mic-card-label);
  --color-card-attiva:       var(--mic-card-attiva);
  --color-card-scaduta:      var(--mic-card-scaduta);
  --color-on-card:           var(--mic-black);
  --shadow-card-profilo:     0 2px 20px 0 var(--mic-card-shadow);
  --shadow-card-profilo-panel: 0 2px 10px 0 var(--mic-card-panel-shadow);

  /* Convenzioni in accordion nella home (M4.11): la fascia grigia che le
     stacca dalla sezione sopra, e le righe fra un blocco e l'altro. */
  --color-convenzioni:     var(--mic-surface-bar);
  --color-accordion-line:  var(--mic-line-bar);

  /* La mappa dei luoghi «Dove usarla» (M4.12). ⚠️ I colori dei pin li legge
     luoghi.js da qui (getComputedStyle): Google vuole i colori come valori, e
     scriverli nello script li porterebbe fuori da tokens.css. Pin tutti uguali
     finché non c'è la tassonomia delle categorie, che darà un colore a ognuna. */
  --color-pin:              var(--mic-gold);
  --color-pin-bordo:        var(--mic-on-dark);
  --color-pin-glifo:        var(--mic-on-dark);
  --color-luoghi-utente:    var(--mic-blue);
  --color-luoghi-utente-alone: var(--mic-blue-halo);
  --color-luoghi-mappa:     var(--mic-map-bg);
  --color-luoghi-riquadro:  var(--mic-bg);
  --color-luoghi-campo:     var(--mic-input-line);
  --color-luoghi-separatore: var(--mic-line-inner);
  --color-luoghi-nome:      var(--mic-gold-dark);
  --color-luoghi-simbolo:   var(--mic-bg);
  --color-luoghi-scelto:    var(--mic-gold);
  --color-luoghi-convenzione: var(--mic-bg);
  --color-luoghi-social:    var(--mic-ink);
  --color-luoghi-social-hover: var(--mic-ink-soft);
  --color-on-luoghi-social: var(--mic-on-dark);
  --color-luoghi-icona:     var(--mic-muted);
  --color-luoghi-piu-hover: var(--mic-cream-hover);
  --color-luoghi-piu-hover-line: var(--mic-gold-line);
  --color-luoghi-piu-active: var(--mic-sand-strong);
  --color-luoghi-maniglia:  var(--mic-input-line);

  /* Form e accesso (M3.2). I campi non avevano token perche' fino a M4.1 il
     sito pubblico non aveva un solo form: la prima pagina che ne ha uno e'
     l'accesso. */
  --color-field-surface:  var(--mic-surface);
  --color-field-border:   var(--mic-line);
  --color-field-focus:    var(--mic-gold);
  --color-field-label:    var(--mic-black);

  /* Esiti: l'errore di validazione e la conferma. Le due varianti "soft" e
     "line" servono al riquadro di riepilogo, che ha fondo e bordo propri. */
  --color-error:          var(--mic-danger);
  --color-error-surface:  var(--mic-danger-soft);
  --color-error-border:   var(--mic-danger-line);
  --color-confirm:        var(--mic-success);
  --color-confirm-surface: var(--mic-success-soft);
  --color-confirm-border: var(--mic-success-line);

  /* I form della registrazione in due passi (M4.8, Blocco 0-P §4.2 e §7).

     Nomi per RUOLO: la riga radio scelta, il consenso obbligatorio, il callout
     informativo, il badge, il riepilogo degli errori, il campo in errore,
     l'esito positivo, il bottone disabilitato o in invio. Il campo del codice
     a sei cifre ha le sue due tinte perché è UN input disegnato a celle. */
  --color-form-selected:        var(--mic-gold-surface);
  --color-form-selected-line:   var(--mic-gold);
  --color-form-callout:         var(--mic-sand);
  --color-form-callout-line:    var(--mic-gold-line);
  --color-form-badge:           var(--mic-sand-strong);
  --color-on-form-badge:        var(--mic-sand-text);
  --color-form-neutral:         var(--mic-neutral-surface);
  --color-form-secondary-line:  var(--mic-gold-line);
  --color-form-error-dark:      var(--mic-danger-dark);
  --color-form-error-surface:   var(--mic-danger-surface);
  --color-form-error-field:     var(--mic-danger-field);
  --color-form-error-line:      var(--mic-danger-line-form);
  --color-form-success:         var(--mic-success-text);
  --color-form-success-surface: var(--mic-success-surface);
  --color-form-disabled:        var(--mic-disabled-bg);
  --color-on-form-disabled:     var(--mic-disabled-fg);
  --color-form-disabled-line:   var(--mic-disabled-line);
  --color-form-disabled-text:   var(--mic-disabled-text);
  --color-form-loading:         var(--mic-loading-bg);
  --color-otp-cell:             var(--mic-surface);
  --color-otp-line:             var(--mic-line);
  --color-required:             var(--mic-gold);

  /* Tipografia */
  --font-body:    var(--mic-font-sans);
  --font-display: var(--mic-font-serif);

  /* Forme */
  --radius:      var(--mic-radius);
  /* Il raggio della tessera MIC, e quindi anche del riquadro dell'immagine del
     banner: le due varianti si alternano nella stessa colonna dell'hero. */
  --radius-card: var(--mic-radius-card);
  --radius-sm:   var(--mic-radius-sm);
  --radius-pill: var(--mic-radius-pill);
  /* Il raggio morbido delle foto, come nell'as-is (`.image-card img`). */
  --radius-foto: var(--mic-radius-foto);
  --shadow-card: var(--mic-shadow-card);
  --shadow-lg:   var(--mic-shadow-lg);
  --shadow-nav:  var(--mic-shadow-nav);

  /* Impaginazione */
  --layout-maxw:      var(--mic-maxw);
  --layout-maxw-wide: var(--mic-maxw-wide);
  --layout-gutter:    var(--mic-gutter);
  --layout-topbar-h:  var(--mic-topbar-h);
  --layout-nav-h:     var(--mic-nav-h);

  /* Sidebar dell'area riservata (M5.0).

     L'ambra e il giallo acceso vengono dal componente DashSidebar dell'handoff,
     dove la voce attiva si distingue per FONDO più acceso e un bordo a sinistra.
     ⚠️ Sono ruoli, non tinte: la veste cambierà, e il giorno in cui la sidebar
     diventasse bianca su bordo grigio si riscrive qui e non nel foglio. */
  --color-sidebar:            var(--mic-amber);
  --color-on-sidebar:         var(--mic-ink);
  --color-sidebar-active:     var(--mic-yellow-bright);
  --color-sidebar-active-mark: var(--mic-black);
  --color-sidebar-line:       var(--mic-cream-line);

  /* Il biglietto col codice e il QR della tessera (M5.1).

     Il fondo è quasi bianco e non bianco: nel wireframe il riquadro si stacca
     dalla pagina grigia con un'ombra, e un bianco pieno accanto alla tessera
     oro sembra un buco. Le tacche laterali hanno il colore DELLA PAGINA, non
     un grigio proprio: sono finti ritagli, e se divergessero dal fondo si
     vedrebbero come due dischi appiccicati. */
  --color-ticket:          var(--mic-surface-alt);
  --color-ticket-notch:    var(--mic-bg);
  --color-codice:          var(--mic-yellow-deep);
  --color-on-codice:       var(--mic-on-dark);

  /* Soglia oltre la quale la navigazione torna orizzontale.
     Non usabile in @media (le custom properties non sono ammesse nelle media
     query): è documentata qui e ripetuta come letterale in public.css. */
  --layout-nav-breakpoint: 760px;

  /* Soglia sotto la quale la sidebar dell'area riservata si mette SOPRA il
     contenuto invece che accanto (M5.0). Stessa avvertenza: ripetuta come
     letterale in riservata.css, perché le media query non leggono le custom
     properties. */
  --layout-riservata-breakpoint: 779px; /* era 700px: vedi .dash in riservata.css (2026-10-27) */
}