/* Token del design system (→10 §1). L'UNICO file in cui puo' comparire un colore letterale.
   Una fitness function (FF07) fallisce se un #rrggbb spunta in un template o in app.css:
   e' quello che impedisce alla palette di sfilacciarsi feature dopo feature.

   La palette e' quella del marchio Fattorino.it (dal sito WordPress, 2026-09):
   il logo e' arancio (#ff4d00), e ogni PUBBLICO ha il suo colore —
     cliente   arancio  (#e84e0e: chi chiede una consegna)
     fattorino verde    (#45972a: rider e corrieri)
     azienda   blu      (#006ab3: aziende di trasporti)
   I tre «vivi» sono i colori originali: vanno bene su superfici grandi (hero, overlay,
   decorazione) ma su bianco non reggono il testo (3,3-3,8:1). Per testo e bottoni c'e'
   la versione «testo», scurita quanto basta per WCAG AA (≥ 4,5:1), stesso tono.
   `--accento` e' il colore del pubblico corrente: lo cambia [data-pubblico] sul body. */

/* --- Tipografia: Montserrat (il font del marchio, vendorizzato: font-src 'self') ----
   Variabile, un file per range: latino + latino esteso. Arabo e bengalese cadono sul
   font di sistema, che li rende meglio di qualsiasi webfont generico. */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/font/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/font/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tema a 3 stati (→10 §2) ---------------------------------------------
   Gli stati sono TRE, non due: chiaro esplicito, scuro esplicito, e "come il sistema"
   (nessun attributo). L'errore classico e' definire un colore SOLO dentro un @media o un
   [data-theme]: in uno dei tre stati quel colore non esiste e l'elemento sparisce.
   Percio': la palette completa vive su :root nudo, e i blocchi sotto RIDEFINISCONO le
   stesse variabili, senza mai introdurne di nuove. */

:root {
  --font-titoli: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-testo: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;

  --carta: #f7f5f2;
  --superficie: #ffffff;
  /* La stampa e' sempre su carta bianca, anche quando lo schermo e' scuro. */
  --stampa-fondo: #ffffff;
  --stampa-inchiostro: #14171a;   /* e l'inchiostro della stampa: cartellini e distinte, nero su bianco anche al buio */
  --inchiostro: #14171a;
  --inchiostro-tenue: #5c646c;
  --linea: #e6e2dc;
  --nero: #0c0c0c;            /* il pie' di pagina del marchio */
  --su-nero: #f7f5f2;

  /* Il marchio e i tre pubblici. «vivo» = superfici grandi; senza suffisso = testo e bottoni. */
  --marchio: #ff4d00;
  --cliente: #c93f07;   --cliente-vivo: #e84e0e;   --cliente-tenue: #fdeee6;
  --fattorino: #2f7a1a; --fattorino-vivo: #45972a; --fattorino-tenue: #e9f4e4;
  --azienda: #005a98;   --azienda-vivo: #006ab3;   --azienda-tenue: #e4f0f9;
  /* Il velo degli hero (24): testo bianco sopra una FOTO, e la foto non la sceglie il CSS —
     quindi il contrasto si garantisce sul caso peggiore, una foto bianca sotto il velo all'85%
     (4,6 · 5,1 · 6,3:1). Il «vivo» al 78% stava a 2,5–3,4:1. Fissi: non cambiano col tema,
     perche' la foto e' la stessa di giorno e di notte. */
  --eroe-cliente: #a8340a; --eroe-fattorino: #225c12; --eroe-azienda: #00436f; --su-eroe: #ffffff;

  /* L'accento e' il pubblico corrente. Default: il cliente (e' il sito pubblico). */
  --accento: var(--cliente);
  --accento-vivo: var(--cliente-vivo);
  --accento-scuro: #a8340a;
  --accento-tenue: var(--cliente-tenue);
  --su-accento: #ffffff;      /* testo SOPRA il fondo d'accento */

  /* Semantica RISERVATA (→FE4). Verde = "vinto", ambra = "da fare", rosso = critico.
     Un numero neutro non e' verde solo perche' e' positivo. Il verde dei FATTORINI e' un
     colore di pubblico (--fattorino), non uno stato: non si usano l'uno per l'altro. */
  --ok: #1c7a52;
  --attenzione: #9a6212;
  --critico: #a83a30;

  --raggio: 10px;
  --ombra: 0 1px 2px rgba(20, 23, 26, .05), 0 4px 12px rgba(20, 23, 26, .05);

  /* Scala tipografica fissa. Il punto non e' quali sette valori: e' che siano sette e
     che non se ne aggiungano altri a occhio, feature dopo feature. */
  --t-xs: 12px; --t-s: 14px; --t-m: 16px; --t-l: 20px;
  --t-xl: 26px; --t-2xl: 34px; --t-3xl: 44px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* La colonna della pagina: nav, contenuto, avvisi e pie' la condividono, cosi' il testo
     parte sotto il logo. Larga abbastanza per logo, voci, lingua e bottone su una riga. */
  --colonna: 1120px;

  /* →09 §E: il hover suggerisce, non sorprende. 120-150 ms. */
  --transizione: 130ms ease;
}

/* Il pubblico corrente cambia l'accento di tutta la pagina: bottoni, link, stato corrente.
   Lo mette viste.pagina() sul body (data-pubblico), non i singoli template. */
/* Il marchio di chi spedisce (15), sulla pagina del link. Un cliente sceglie un NOME di
   questa tavolozza, mai un valore: ogni colore regge il testo bianco sopra (AA, >= 4.5:1),
   e non cambia col tema scuro — e' il suo marchio, non la nostra interfaccia. */
:root {
  --marchio-blu: #1d4f91; --marchio-petrolio: #0f5c63; --marchio-verde: #2e6b30;
  --marchio-rosso: #b0282e; --marchio-bordeaux: #7a1f3d; --marchio-viola: #5b3a8c;
  --marchio-marrone: #6b4423; --marchio-grafite: #3a3f47;
  --su-marchio: #ffffff;
}
[data-marchio="blu"] { --marchio: var(--marchio-blu); }
[data-marchio="petrolio"] { --marchio: var(--marchio-petrolio); }
[data-marchio="verde"] { --marchio: var(--marchio-verde); }
[data-marchio="rosso"] { --marchio: var(--marchio-rosso); }
[data-marchio="bordeaux"] { --marchio: var(--marchio-bordeaux); }
[data-marchio="viola"] { --marchio: var(--marchio-viola); }
[data-marchio="marrone"] { --marchio: var(--marchio-marrone); }
[data-marchio="grafite"] { --marchio: var(--marchio-grafite); }

[data-pubblico="fattorino"] {
  --accento: var(--fattorino); --accento-vivo: var(--fattorino-vivo);
  --accento-scuro: #225c12; --accento-tenue: var(--fattorino-tenue);
}
[data-pubblico="azienda"] {
  --accento: var(--azienda); --accento-vivo: var(--azienda-vivo);
  --accento-scuro: #00436f; --accento-tenue: var(--azienda-tenue);
}

@media (prefers-color-scheme: dark) {
  /* La guardia :not([data-theme="light"]) e' cio' che fa funzionare il terzo stato:
     senza, chi ha scelto il chiaro su un sistema scuro resta al buio. */
  :root:not([data-theme="light"]) {
    --carta: #14171a;
    --superficie: #1c2024;
    --inchiostro: #e8eaec;
    --inchiostro-tenue: #9aa3ab;
    --linea: #2b3137;
    --nero: #0c0c0c;
    --su-nero: #e8eaec;
    --cliente: #ff8a5c;   --cliente-tenue: #3a1d10;
    --fattorino: #7ccb60; --fattorino-tenue: #1a2e14;
    --azienda: #6fbcff;   --azienda-tenue: #0f2438;
    --accento-scuro: #ffa885;
    --su-accento: #14171a;
    --ok: #57c48f;
    --attenzione: #d3a04a;
    --critico: #e0796d;
    --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35);
  }
  :root:not([data-theme="light"]) [data-pubblico="fattorino"] { --accento-scuro: #9bdb84; }
  :root:not([data-theme="light"]) [data-pubblico="azienda"] { --accento-scuro: #9ccfff; }
}

/* La scelta esplicita vince sempre, in entrambe le direzioni. */
:root[data-theme="dark"] {
  --carta: #14171a;
  --superficie: #1c2024;
  --inchiostro: #e8eaec;
  --inchiostro-tenue: #9aa3ab;
  --linea: #2b3137;
  --nero: #0c0c0c;
  --su-nero: #e8eaec;
  --cliente: #ff8a5c;   --cliente-tenue: #3a1d10;
  --fattorino: #7ccb60; --fattorino-tenue: #1a2e14;
  --azienda: #6fbcff;   --azienda-tenue: #0f2438;
  --accento-scuro: #ffa885;
  --su-accento: #14171a;
  --ok: #57c48f;
  --attenzione: #d3a04a;
  --critico: #e0796d;
  --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35);
}
:root[data-theme="dark"] [data-pubblico="fattorino"] { --accento-scuro: #9bdb84; }
:root[data-theme="dark"] [data-pubblico="azienda"] { --accento-scuro: #9ccfff; }