/* ============================================================
   PEPPER — I COLORI

   I tre file prima di questo sono lo stile di Dossiero, copiati
   da docs/stile/css/ senza toccarli: se di là cambia qualcosa,
   si ricopiano e basta. Qui dentro c'è SOLO quello che rende la
   consolle di Pepper riconoscibile come Pepper.

   E qui si vede il senso di quel kit: per cambiare marca non
   serve riscrivere un componente, bastano i nomi dei colori.
   Se un giorno serve toccare un componente per far tornare i
   conti, vuol dire che quel componente ha un colore scritto a
   mano invece di una variabile: si sistema là, non qui.

   L'accento di Dossiero è il ciano. Quello di Pepper è il fuoco:
   il rosso e l'arancio che aveva già la barra in alto.

   Ordine: 01-token, 02-base, 03-componenti, 04-pepper.
   ============================================================ */

/* ---- Tema scuro (quello di casa) ---- */
:root {
  /* L'arancio acceso è l'unico che si legge davvero sul blu notte:
     il rosso #c0392b su quel fondo diventa marrone. */
  --accent: #ff8a4c;
  --accent-2: #ffb489;
  --accent-soft: rgba(255, 138, 76, 0.10);
  --accent-ring: rgba(255, 138, 76, 0.18);

  /* Il bottone che conta: il rosso-arancio della barra di Pepper.
     Al contrario del ciano di Dossiero è un colore SCURO, quindi
     il testo sopra è bianco e non nero. */
  --btn-bg: linear-gradient(135deg, #e0562e, #c0392b);
  --btn-text: #ffffff;
  --btn-glow: rgba(224, 86, 46, 0.32);
  --btn-glow-hover: rgba(224, 86, 46, 0.45);
}

/* ---- Tema chiaro: la carta color panna che Pepper aveva già ---- */
body.theme-light {
  --bg: #f6f3ee;
  --bg-soft: #efe9e0;
  --panel: #ffffff;
  --panel-2: #f1ece3;
  --card: #ffffff;
  --card-strong: #fbf8f3;
  --card-muted: #f1ece3;

  --text: #2b2724;
  --muted: #6f675c;
  --muted-strong: #423c35;

  --line: #eae4d9;
  --line-strong: #d9d2c5;

  /* Sul chiaro l'arancio sparisce: l'accento testuale torna al rosso
     Pepper, che sul bianco si legge. Il bottone resta com'è. */
  --accent: #c0392b;
  --accent-2: #a02c20;
  --accent-soft: rgba(192, 57, 43, 0.10);
  --accent-ring: rgba(192, 57, 43, 0.16);

  --shadow: 0 18px 48px rgba(60, 45, 30, 0.12);
  --shadow-soft: 0 10px 24px rgba(60, 45, 30, 0.10);
}

/* ---- Il marchio ----
   L'unica aggiunta di struttura: il logo tondo nella barra in alto.
   Il kit prevede .brand-logo, qui gli si dà solo la faccia di Pepper. */
.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 1px var(--line);
}

/* Il numero di versione sotto il nome, in alto a sinistra: chi guarda
   la consolle deve sapere subito cosa sta girando davvero sul server. */
.brand-sub {
  letter-spacing: 0.04em;
}

/* ---- Le pagine senza menu (il login) ----
   Il kit dà per scontato che il menu laterale ci sia sempre: la griglia tiene
   la sua colonna anche quando dentro non c'è niente, e il contenuto finisce
   spostato a destra di tutta la larghezza del menu. Sul login il menu non c'è
   (non si è ancora entrati), quindi lì la griglia torna a una colonna sola. */
.app.senza-menu {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "content"
    "footer";
}

/* ---- Chiavi e impronte ----
   Stringhe lunghe senza spazi (chiavi API, id di conversazione): senza
   questo sfondano la card invece di andare a capo. */
code.chiave {
  display: inline-block;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 9px;
  font-size: var(--fs-small);
  word-break: break-all;
  max-width: 100%;
}

/* ---- Numeri in colonna ----
   Nelle tabelle di consumi e costi le cifre vanno a destra e con le
   cifre della stessa larghezza, o le colonne ballano riga per riga. */
.destra {
  text-align: right;
  font-variant-numeric: tabular-nums;
}