/*
 * Token dell'identità visiva approvata.
 *
 * I valori sono quelli del prototipo, invariati: ogni neutro è caldo (crema, non
 * bianco freddo) e ogni ombra ha una componente bruna. È la caratteristica che
 * distingue questa interfaccia da un pannello amministrativo qualsiasi, e non va
 * persa nel passaggio da prototipo a prodotto.
 *
 * I quattro token --brand-* sono le SORGENTI: l'area di amministrazione li
 * sovrascrive a runtime su documentElement e tutto il resto ne deriva. Per questo
 * i colori d'uso (--coral, --cream, --paper, --sidebar-bg) non hanno valori
 * propri ma un var() con ricaduta: cambiare il branding non richiede di toccare
 * nessun'altra regola.
 *
 * Le tinte trasparenti del colore principale si ottengono con `color-mix`, non
 * riscrivendone il valore in rgba: una rgba scritta a mano è una copia del colore
 * predefinito, e resta quella anche dopo che la Fondazione ne ha scelto un altro.
 *
 * Restano letterali, e devono restarlo, i colori semantici: i cinque toni dei
 * messaggi e quelli delle pastiglie di stato. Verde vuol dire fatto, ambra vuol
 * dire in attesa; derivarli dal colore della Fondazione li renderebbe tutti simili
 * fra loro e toglierebbe l'informazione che portano.
 */

:root {
  /* --- sorgenti di branding, sovrascrivibili a runtime --- */
  --brand-primary: #e77764;
  --brand-background: #f7f0e7;
  --brand-surface: #fffdf9;
  --brand-sidebar: #272623;

  /* --- superfici --- */
  --cream: var(--brand-background);
  --paper: var(--brand-surface);
  --paper-2: #fbf7f1;
  --sidebar-bg: var(--brand-sidebar);

  /* --- testo --- */
  --ink: #222222;
  --muted: #746f68;
  --line: #e7ded4;

  /* --- accenti --- */
  --coral: var(--brand-primary);
  --coral-deep: #b94d3d;
  --mint: #b9dfca;
  --mint-deep: #32785a;
  --amber: #f2cf7e;
  --amber-deep: #8b6315;
  --lavender: #d9d0ee;
  --lavender-deep: #665295;
  --blue: #c9dced;
  --danger: #b54a4a;

  /* --- stato di un codice ---
     Gli stessi due colori li usano le pastiglie nell'area riservata e i riquadri
     nella pagina del donatore: sono lo stesso fatto visto da due parti, e devono
     restare uguali anche quando qualcuno ritocca l'uno o l'altro foglio. */
  --unit-free-bg: #eee8e1;
  --unit-free-ink: #736b63;
  --unit-used-bg: var(--mint);
  --unit-used-ink: #24563e;

  /* --- forma --- */
  --shadow: 0 15px 42px rgba(58, 42, 29, .08);
  --shadow-hover: 0 6px 18px rgba(65, 49, 35, .08);
  --radius: 20px;
  --radius-sm: 11px;
  --radius-pill: 999px;

  /* --- tipografia --- */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* --- spaziature ricorrenti --- */
  --gap: 16px;
  --content-max: 1680px;
  --sidebar-width: 278px;
  --topbar-height: 76px;

  font-family: var(--font-sans);
}