/* ============================================================
   TEMA — unico punto in cui vivono i token visivi del sito.
   Prima erano duplicati nel :root di index/menu/prenota/info.

   Tre livelli, in ordine di precedenza crescente:
     1. :root                    l'aspetto predefinito del template
                                  (l'insegna smaltata: non e' un preset,
                                  e' quello che vede un sito appena nato)
     2. [data-preset="..."]      preset scelto dal ristorante
     3. style dell'elemento html  override dei singoli colori,
                                  scritti da brand.js dalle impostazioni

   I token non sono solo colori: portano anche la FORMA (raggi, spessore
   dei bordi, riempimenti) e i SEGNI tipografici. Serve perche' l'aspetto
   predefinito del template e quello di un ristorante che ha scelto una
   combinazione devono poter essere due disegni diversi, non lo stesso
   disegno ricolorato — e l'impaginato e' condiviso da tutti i siti.

   Aggiungere una famiglia di caratteri richiede anche il <link> dei font
   in tutte le pagine. Il browser scarica un font solo se qualcosa lo usa
   davvero, quindi un sito che non lo nomina non lo paga.

   Nei preset chiari --panel e --line devono passare al nero
   trasparente: in bianco sparirebbero sul fondo.
   ============================================================ */

/* PREDEFINITO — insegna smaltata.
   Il linguaggio delle targhe smaltate dei bar e delle trattorie: un campo
   di colore pieno, lettere spesse color latte, una cornice sottile un po'
   dentro il bordo. Niente fotografie: il colore e il nome bastano, ed e'
   proprio quello che serve a un sito consegnato prima che il cliente
   porti le sue immagini. */
:root{
  --bg:#125e46;                      /* verde smalto: un colore, non un quasi-nero */
  --panel:rgba(0,0,0,.20);           /* la placca e' incassata nel campo */
  --line:rgba(244,240,228,.42);      /* la cornice si deve vedere: e' struttura */
  --text:#f4f0e4;                    /* bianco latte, non bianco */
  --muted:#cfe0d5;
  --accent:#f6cd54;                  /* ocra */
  --accent2:#fae6a8;
  /* Le stesse tinte in rgb. Servono perche' nelle pagine l'accento compare
     centinaia di volte come velo trasparente — rgba(...,.12) — e una var()
     di colore non si puo' spezzare in canali. */
  --accent-rgb:246,205,84;
  --accent2-rgb:250,230,168;
  --su-accento:#123527;              /* il testo scritto sopra un fondo d'accento */
  --ombra-logo:none;                 /* su un campo piatto il marchio non galleggia */
  --gold:#f6cd54;
  /* Archivo e Archivo Black sono la stessa famiglia: il nome scritto grosso
     e il testo che lo accompagna hanno lo stesso disegno di lettera, come su
     una targa fatta da una mano sola. E non e' il carattere di stef. */
  --font-display:'Archivo Black',system-ui,sans-serif;
  --font-sans:'Archivo',system-ui,sans-serif;
  --font-mono:'Space Mono',monospace;   /* resta per le cifre: li' serve la larghezza fissa */

  /* forma */
  --raggio:16px;
  --bordo:2px;
  --riempimento:var(--panel);        /* placca piatta, non sfumata */
  --ombra:none;
  --alza:0;                          /* di quanto sale una placca al passaggio */

  /* segni: nel disegno predefinito il testo si regge da solo */
  --etichetta-font:var(--font-sans);
  --etichetta-transform:none;
  --etichetta-spaziatura:.01em;
  --etichetta-peso:700;
  --etichetta-larga:.06em;           /* la riga sotto il nome: qui e' una firma, non un occhiello */
  --bagliore:0 0 0;                  /* niente lampadine: su una targa smaltata il pallino e' stampato */
  --punti:none;                      /* i · attorno alla riga d'apertura */
  --numeri:none;                     /* i "01 —" davanti alle scelte */
  --frecce:none;                     /* le → in coda ai link */
  --cornice:14px;                    /* quanto dentro il bordo sta la cornice */
  --cornice-bordo:2px;               /* 0 = nessuna cornice */
  --velo:.35;                        /* poco: il campo dev'essere piatto, non sfumato */
  /* Il velo sopra il video del menu'. Su un campo pieno basta un'ombra
     leggera: e' li' per far leggere il nome, non per fare notte. */
  --velo-hero:radial-gradient(75% 60% at 50% 45%, rgba(0,0,0,.10), rgba(0,0,0,.30) 100%);
  --alone:none;                      /* l'alone al centro della scena */
  --braci:none;                      /* le braci volanti: solo dove c'e' la brace */
  --nastro-moto:none;                /* il nastro di parole: fermo */
  --nastro-a-capo:wrap;
  --nastro-larghezza:auto;
  --nastro-sfumatura:none;
  --velatura:rgba(0,0,0,.22);        /* barre e pillole: piu' scure del campo */
  --velatura-forte:rgba(0,0,0,.42);
  /* Superfici opache: i campi di un modulo e i pannelli che stanno sopra
     la pagina (tendine, finestre). Prima erano scritte a mano nelle
     pagine, sempre nere: su un fondo chiaro erano buchi. */
  --campo:#0f4c38;
  --sfondo-alto:#0e4433;
  --ombra-testo:none;                /* serve sopra una foto, non su un campo pieno */
}

/* braceria — brace su fondo carbone.
   Combinazione 'braceria': il disegno scuro e cinematografico, con i segni
   tipografici che porta con se'. E' l'aspetto di chi lo ha gia' scelto: qui
   ogni token torna al valore che aveva prima che il predefinito cambiasse. */
[data-preset="braceria"]{
  --bg:#0b0806;
  --panel:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.10);
  --text:#f4ece2;
  --muted:#a99a8b;
  --accent:#e7401b;
  --accent2:#ff7a3c;
  --accent-rgb:231,64,27;
  --accent2-rgb:255,122,60;
  --su-accento:#fff;
  --ombra-logo:drop-shadow(0 10px 40px rgba(0,0,0,.85));
  --gold:#d9a441;
  --font-display:'Fraunces',serif;
  --font-sans:'Space Grotesk',sans-serif;
  --font-mono:'Space Mono',monospace;

  /* forma e segni: il disegno di prima */
  --raggio:18px;
  --bordo:1px;
  --riempimento:linear-gradient(165deg,var(--panel),rgba(255,255,255,.012));
  --ombra:0 30px 70px -30px rgba(var(--accent-rgb),.4);
  --alza:-6px;
  --etichetta-font:var(--font-mono);
  --etichetta-transform:uppercase;
  --etichetta-spaziatura:.5em;
  --etichetta-peso:400;
  --etichetta-larga:.42em;
  --bagliore:0 0 12px;
  --punti:inline;
  --numeri:inline;
  --frecce:inline;
  --cornice:0;
  --cornice-bordo:0;
  --velo:.8;
  --velo-hero:radial-gradient(75% 60% at 50% 45%, rgba(11,8,6,.30), rgba(11,8,6,.78) 100%);
  --braci:block;
  --nastro-moto:scroll 28s linear infinite;
  --nastro-a-capo:nowrap;
  --nastro-larghezza:max-content;
  --nastro-sfumatura:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  --velatura:rgba(11,8,6,.55);
  --velatura-forte:rgba(11,8,6,.92);
  --campo:#16110c;
  --sfondo-alto:#14100b;
  --ombra-testo:0 2px 14px rgba(0,0,0,.9);
  --alone:radial-gradient(80% 60% at 50% 28%, var(--panel), transparent 72%);
}

/* pizzeria — forno a legna: fondo crema, rosso pomodoro */
[data-preset="pizzeria"]{
  --bg:#fbf6ee;
  --panel:rgba(0,0,0,.035);
  --line:rgba(0,0,0,.14);
  --text:#23180f;
  --muted:#5d4c3b;
  --accent:#b3081f;
  --accent2:#8a4213;
  --accent-rgb:179,8,31;
  --accent2-rgb:138,66,19;
  --su-accento:#fff;
  --ombra-logo:drop-shadow(0 10px 40px rgba(0,0,0,.85));
  --gold:#7a5a12;
  --font-display:'Fraunces',serif;
  --font-sans:'Space Grotesk',sans-serif;
  --font-mono:'Space Mono',monospace;

  /* forma e segni: il disegno di prima */
  --raggio:18px;
  --bordo:1px;
  --riempimento:linear-gradient(165deg,var(--panel),rgba(255,255,255,.012));
  --ombra:0 30px 70px -30px rgba(var(--accent-rgb),.4);
  --alza:-6px;
  --etichetta-font:var(--font-mono);
  --etichetta-transform:uppercase;
  --etichetta-spaziatura:.5em;
  --etichetta-peso:400;
  --etichetta-larga:.42em;
  --bagliore:0 0 12px;
  --punti:inline;
  --numeri:inline;
  --frecce:inline;
  --cornice:0;
  --cornice-bordo:0;
  --velo:.8;
  --velo-hero:radial-gradient(75% 60% at 50% 45%, rgba(11,8,6,.30), rgba(11,8,6,.78) 100%);
  --braci:block;
  --nastro-moto:scroll 28s linear infinite;
  --nastro-a-capo:nowrap;
  --nastro-larghezza:max-content;
  --nastro-sfumatura:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  --velatura:rgba(11,8,6,.55);
  --velatura-forte:rgba(11,8,6,.92);
  --campo:#ffffff;
  --sfondo-alto:#fffdf9;
  --ombra-testo:0 2px 14px rgba(0,0,0,.9);
  --alone:radial-gradient(80% 60% at 50% 28%, var(--panel), transparent 72%);
}

/* pesce — blu notte e sabbia */
[data-preset="pesce"]{
  --bg:#071a26;
  --panel:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.13);
  --text:#eaf3f7;
  --muted:#9db6c2;
  --accent:#3fb6d8;
  --accent2:#6fd3ea;
  --accent-rgb:63,182,216;
  --accent2-rgb:111,211,234;
  --su-accento:#fff;
  --ombra-logo:drop-shadow(0 10px 40px rgba(0,0,0,.85));
  --gold:#d8c48b;
  --font-display:'Fraunces',serif;
  --font-sans:'Space Grotesk',sans-serif;
  --font-mono:'Space Mono',monospace;

  /* forma e segni: il disegno di prima */
  --raggio:18px;
  --bordo:1px;
  --riempimento:linear-gradient(165deg,var(--panel),rgba(255,255,255,.012));
  --ombra:0 30px 70px -30px rgba(var(--accent-rgb),.4);
  --alza:-6px;
  --etichetta-font:var(--font-mono);
  --etichetta-transform:uppercase;
  --etichetta-spaziatura:.5em;
  --etichetta-peso:400;
  --etichetta-larga:.42em;
  --bagliore:0 0 12px;
  --punti:inline;
  --numeri:inline;
  --frecce:inline;
  --cornice:0;
  --cornice-bordo:0;
  --velo:.8;
  --velo-hero:radial-gradient(75% 60% at 50% 45%, rgba(11,8,6,.30), rgba(11,8,6,.78) 100%);
  --braci:block;
  --nastro-moto:scroll 28s linear infinite;
  --nastro-a-capo:nowrap;
  --nastro-larghezza:max-content;
  --nastro-sfumatura:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  --velatura:rgba(11,8,6,.55);
  --velatura-forte:rgba(11,8,6,.92);
  --campo:#0c2433;
  --sfondo-alto:#0a2130;
  --ombra-testo:0 2px 14px rgba(0,0,0,.9);
  --alone:radial-gradient(80% 60% at 50% 28%, var(--panel), transparent 72%);
}

/* bistrot — scuro minimal, senza serif nei titoli */
[data-preset="bistrot"]{
  --bg:#12100e;
  --panel:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.11);
  --text:#f0ece6;
  --muted:#a8a199;
  --accent:#5cb87f;
  --accent2:#86d5a3;
  --accent-rgb:92,184,127;
  --accent2-rgb:134,213,163;
  --su-accento:#fff;
  --ombra-logo:drop-shadow(0 10px 40px rgba(0,0,0,.85));
  --gold:#c9a961;
  --font-display:'Space Grotesk',sans-serif;
  --font-sans:'Space Grotesk',sans-serif;
  --font-mono:'Space Mono',monospace;

  /* forma e segni: il disegno di prima */
  --raggio:18px;
  --bordo:1px;
  --riempimento:linear-gradient(165deg,var(--panel),rgba(255,255,255,.012));
  --ombra:0 30px 70px -30px rgba(var(--accent-rgb),.4);
  --alza:-6px;
  --etichetta-font:var(--font-mono);
  --etichetta-transform:uppercase;
  --etichetta-spaziatura:.5em;
  --etichetta-peso:400;
  --etichetta-larga:.42em;
  --bagliore:0 0 12px;
  --punti:inline;
  --numeri:inline;
  --frecce:inline;
  --cornice:0;
  --cornice-bordo:0;
  --velo:.8;
  --velo-hero:radial-gradient(75% 60% at 50% 45%, rgba(11,8,6,.30), rgba(11,8,6,.78) 100%);
  --braci:block;
  --nastro-moto:scroll 28s linear infinite;
  --nastro-a-capo:nowrap;
  --nastro-larghezza:max-content;
  --nastro-sfumatura:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  --velatura:rgba(11,8,6,.55);
  --velatura-forte:rgba(11,8,6,.92);
  --campo:#191614;
  --sfondo-alto:#17140f;
  --ombra-testo:0 2px 14px rgba(0,0,0,.9);
  --alone:radial-gradient(80% 60% at 50% 28%, var(--panel), transparent 72%);
}