/* ============================================================================
   LocalMind — design tokens
   ----------------------------------------------------------------------------
   L'UNICA sorgente di colore, tipografia, raggi e spaziature dell'applicazione.
   Sia `app/style.css` sia `marketing.css` importano questo file: nessun altro
   foglio di stile deve contenere un valore esadecimale.

   Se serve un colore che qui non c'è, si aggiunge un token in questo file —
   non si scrive un esadecimale nel punto in cui serve.
   ========================================================================== */

:root {

  /* ── Marchio ────────────────────────────────────────────────────────────
     Il corallo su bianco sta a ~3,2:1 e NON passa per il testo. Il corallo è
     un colore da riempimento (con testo bianco sopra), da icona e da bordo.
     Qualsiasi testo o link corallo usa `--coral-ink`. */
  --coral:          #F5562B;   /* azione primaria, stato attivo, serie dati primaria */
  --coral-ink:      #C23A14;   /* TESTO e link corallo, solo su fondi chiari */
  --coral-soft:     #FCE3D9;   /* riempimento d'area sotto le linee dei grafici */

  /* ── Superfici e testo ── */
  --graphite:       #201F1D;   /* testo del corpo, superfici scure, sidebar */
  --graphite-up:    #34322E;   /* elemento in rilievo/attivo su una superficie grafite */
  --stone:          #6F6B66;   /* testo secondario, didascalie, etichette degli assi */
  --ash:            #E6E3DE;   /* bordi, divisori, traccia vuota di una progress bar */
  --sand:           #F6F4F1;   /* sfondo dell'applicazione */
  --surface:        #FFFFFF;   /* schede e pannelli */

  /* ── Semantica ──────────────────────────────────────────────────────────
     Il verde marca i delta positivi, `--stone` (con una freccia giù) marca i
     negativi. NON esiste un rosso per i negativi: colliderebbe con il corallo
     del marchio e a colpo d'occhio i due diventano indistinguibili. */
  --green:          #1F8A5B;   /* valori numerici e delta positivi, su chiaro */
  --green-on-dark:  #35B37E;   /* gli stessi, su superfici grafite */

  /* ── Sidebar (su grafite) ── */
  --sidebar-text:   #C5C1BB;   /* etichette di navigazione su grafite */
  --sidebar-muted:  #8B8781;   /* conteggi e testo secondario su grafite */

  /* ── Tokens derivati ─────────────────────────────────────────────────────
     Ricavati per miscelazione dai colori qui sopra, così non entra in tavolozza
     nessun esadecimale nuovo. */

  /* Divisori e superfici alternate su grafite. */
  --graphite-line:  var(--graphite-up);
  --graphite-sunk:  color-mix(in oklab, var(--graphite) 70%, black);

  /* Fondo delle righe alternate / degli stati hover su chiaro. */
  --sand-sunk:      color-mix(in oklab, var(--ash) 45%, var(--sand));
  --ash-strong:     color-mix(in oklab, var(--graphite) 14%, var(--ash));

  /* Corallo premuto / hover su un riempimento corallo. */
  --coral-press:    color-mix(in oklab, var(--graphite) 14%, var(--coral));

  /* ── Scala della pipeline ────────────────────────────────────────────────
     Scala sequenziale neutra: più avanti nell'imbuto = più scuro. Non è un
     colore di marchio, è una scala di dati — per questo non usa il corallo,
     che resta riservato all'unico blocco pieno per schermata. L'ultimo stadio
     ("Clienti", trattativa vinta) è l'eccezione: è il traguardo, ed è corallo.
     "Chiusi" è fuori dal percorso e resta neutro. */
  --stage-1:        color-mix(in oklab, var(--graphite) 12%, var(--ash));
  --stage-2:        color-mix(in oklab, var(--graphite) 26%, var(--ash));
  --stage-3:        color-mix(in oklab, var(--graphite) 40%, var(--ash));
  --stage-4:        color-mix(in oklab, var(--graphite) 55%, var(--ash));
  --stage-5:        color-mix(in oklab, var(--graphite) 70%, var(--ash));
  --stage-6:        color-mix(in oklab, var(--graphite) 85%, var(--ash));
  --stage-won:      var(--coral);
  --stage-closed:   var(--stone);

  /* ── Tipografia ─────────────────────────────────────────────────────────
     Una sola famiglia per tutta l'applicazione. */
  --font: "Archivo", system-ui, sans-serif;

  --ls-display:     -0.045em;  /* wordmark / display, 700 */
  --ls-heading:     -0.03em;   /* titoli, 700 */

  /* ── Raggi ── */
  --r-nav:          6px;       /* voci di navigazione */
  --r-control:      7px;       /* bottoni e campi */
  --r-panel:        10px;      /* schede e pannelli */

  /* ── Elevazione ─────────────────────────────────────────────────────────
     Nessuna. La separazione è un bordo da 1px, un divisore da 1px, o niente.
     Non esiste un token d'ombra: se serve separare, si usa `--ash`. */

  /* ── Focus ──────────────────────────────────────────────────────────────
     Visibile su ogni elemento interattivo, anche su grafite. */
  --focus-ring:     var(--coral);
  --focus-width:    2px;
  --focus-offset:   2px;

  /* ── Movimento ──────────────────────────────────────────────────────────
     Solo quando qualcosa cambia davvero stato: apertura, espansione, conferma.
     Niente movimento in hover sulle schede. */
  --ease:           cubic-bezier(.22, .61, .36, 1);
  --t:              140ms var(--ease);

  /* ── Sito pubblico ─────────────────────────────────────────────────────
     Quattro velature ricavate dai colori qui sopra: servono alla home, dove
     una superficie deve lasciar intravedere quella sotto (intestazione
     appiccicata, alone del marchio, reticoli di fondo). Le miscele con
     `transparent` stanno in sRGB: in oklab il canale alfa premoltiplicato
     sbianca la tinta. */
  --veil:           color-mix(in srgb, var(--sand) 84%, transparent);      /* intestazione appiccicata */
  --bloom:          color-mix(in srgb, var(--coral) 15%, transparent);     /* alone dietro il marchio */
  --grid-line:      color-mix(in srgb, var(--graphite) 7%, transparent);   /* reticolo su chiaro */
  --graphite-hair:  color-mix(in srgb, var(--sand) 13%, transparent);      /* filo e reticolo su grafite */

  /* ── Misure di layout ── */
  --sidebar-w:      252px;
  --ctx-w:          320px;
  --measure:        72ch;      /* misura di lettura della chat */


  /* ══════════════════════════════════════════════════════════════════════
     Alias di compatibilità
     ----------------------------------------------------------------------
     `app/style.css` è un foglio da 2000 righe scritto contro i nomi qui
     sotto. Restano come alias in modo che ogni regola legga comunque dai
     token: nessuna regola contiene più un esadecimale, e cambiare la
     tavolozza resta una modifica di questo solo file.
     ══════════════════════════════════════════════════════════════════════ */

  --shell:          var(--surface);
  --sidebar:        var(--graphite);
  --surface-1:      var(--sand);
  --surface-2:      var(--sand-sunk);
  --surface-3:      var(--ash);

  --border:         var(--ash);
  --border-strong:  var(--ash-strong);

  /* `--accent` è un colore da riempimento/bordo/icona. Per il TESTO corallo
     esiste `--accent-text`, che è corallo-inchiostro e passa il contrasto. */
  --accent:         var(--coral);
  --accent-text:    var(--coral-ink);
  --accent-soft:    var(--coral-soft);

  --text:           var(--graphite);
  --text-soft:      var(--graphite);
  --text-muted:     var(--stone);
  --text-faint:     var(--stone);

  /* Le azioni distruttive non hanno un rosso proprio: userebbero l'unico
     rosso disponibile, che è il corallo del marchio. Sono testo
     corallo-inchiostro su bordo neutro; il riempimento pieno compare solo
     sulla conferma dentro la modale. */
  --error:          var(--coral-ink);
  --error-soft:     var(--coral-soft);
  --success:        var(--green);
  --success-soft:   color-mix(in oklab, var(--green) 12%, var(--surface));

  /* I raggi non hanno alias: ogni regola usa --r-nav, --r-control o --r-panel. */


  /* ══════════════════════════════════════════════════════════════════════
     Marchio Egida — colori delle varianti
     ----------------------------------------------------------------------
     La geometria degli SVG in `assets/brand/` è riprodotta identica in
     `brand.js`; qui vivono soltanto i colori, così il marchio segue la
     tavolozza invece di avere esadecimali congelati nel file.
     ══════════════════════════════════════════════════════════════════════ */
  --aegis-ring:     var(--graphite);   /* anelli e raggi */
  --aegis-core:     var(--coral);      /* umbone centrale */
  --aegis-field:    transparent;       /* campo, solo nelle varianti piene */
}

/* Varianti del marchio. Il centro resta sempre corallo, tranne su `app` dove
   il campo è già corallo e il centro diventa bianco (vedi assets/brand/README). */
.aegis--solid   { --aegis-field: var(--graphite); --aegis-ring: var(--sand); }
.aegis--reverse { --aegis-field: var(--sand);     --aegis-ring: var(--graphite); }
.aegis--app     { --aegis-field: var(--coral);    --aegis-ring: var(--surface); --aegis-core: var(--surface); }


/* ============================================================================
   Primitive tipografiche condivise
   ========================================================================== */

/* Ogni valore numerico dell'applicazione — metriche, conteggi, badge, valute,
   percentuali, date, celle di tabella — usa cifre a larghezza fissa, così le
   colonne restano allineate e i numeri che cambiano non fanno saltare il testo. */
.num,
.kpi-val, .kpi-delta, .stage-count, .stage-seg, .foot-count, .ni-meta,
.camp-row-num b, .kanban-column-count, .ws-tab-badge, .upload-count,
.tree-file-chunks, .cal-chip-time, .sa-meta, .ai-timing, .ai-tokrate,
.attach-size, .input-counter, .lead-score, .metric-val, .badge-count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* I numeri sono peso 600: si distinguono dall'etichetta senza cambiare colore. */
.num { font-weight: 600; }

/* Le colonne numeriche delle tabelle sono allineate a destra. */
.num-col, td.num, th.num { text-align: right; }

/* Il wordmark e i titoli display. */
.wordmark {
  font-weight: 700;
  letter-spacing: var(--ls-display);
}


/* ============================================================================
   Focus
   ----------------------------------------------------------------------------
   Visibile su OGNI elemento interattivo. Definito una volta qui, per tutta
   l'applicazione e per il sito.
   ========================================================================== */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Su grafite l'anello di focus corallo resta leggibile; gli si aggiunge un filo chiaro
   solo quando il focus cade su un elemento già corallo. */
.on-graphite :focus-visible {
  outline-color: var(--coral);
}
.btn-primary:focus-visible,
.aegis--app:focus-visible {
  outline-color: var(--graphite);
}


/* ============================================================================
   Movimento
   ----------------------------------------------------------------------------
   Rispettato in tutta l'applicazione: chi chiede meno movimento non ne riceve.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}