/*
  Saziami — colori, caratteri e insegne.

  Il fondo è il petrolio dell'icona, la luce è lo zafferano del suo simbolo.
  I titoli e i nomi dei locali sono in Bricolage Grotesque, il resto in Figtree: moderni e
  cordiali, da app per tutti (il Bodoni di prima faceva pensare alle carte da gioco, 26/10/2026).
  Entrambi con licenza SIL OFL 1.1 (font/OFL-*.txt), copiati qui: nessuna richiesta a Google.
  Ogni famiglia di locali ha il colore della sua insegna smaltata.
  Tema di base scuro; "chiaro" con data-theme="light". Il fondo cambia appena
  con il momento della giornata (colazione, pranzo, merenda, aperitivo, cena, tardi).
*/
/* latin e latin-ext: l'italiano e i nomi stranieri dei locali (Schnals, Bäckerei…); ogni file si scarica solo se serve */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("font/bricolage-grotesque-ext.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("font/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap;
  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: "Figtree";
  src: url("font/figtree-italic-ext.woff2") format("woff2");
  font-weight: 300 900; font-style: italic; font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  src: url("font/figtree-italic.woff2") format("woff2");
  font-weight: 300 900; font-style: italic; font-display: swap;
  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: "Figtree";
  src: url("font/figtree-ext.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  src: url("font/figtree.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
  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;
}

:root {
  color-scheme: dark;
  --f-titolo: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-testo: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Bricolage non ha il corsivo: niente corsivo finto sui titoli (Figtree il suo ce l'ha) */
  font-synthesis-style: none;

  /* petrolio e panna */
  --ink: #f4ecdc;
  --muted: #d3cbb9;
  --faint: #98aba9;
  --body-text: #e6dfcf;
  --line: rgba(244, 236, 220, 0.13);
  --line-soft: rgba(244, 236, 220, 0.07);
  --line-forte: rgba(244, 236, 220, 0.24);
  --card: #0b3640;
  --card-hi: #0f3f4a;
  --sheet: rgba(5, 38, 45, 0.96);
  --sheet-solido: #05262d;
  --ctl: rgba(244, 236, 220, 0.075);
  --ctl-strong: rgba(244, 236, 220, 0.13);
  --fade-1: rgba(2, 30, 36, 0.97);
  --fade-mid: rgba(2, 30, 36, 0.7);
  --fade-0: rgba(2, 30, 36, 0);
  --tab-on: rgba(255, 184, 77, 0.3);

  /* zafferano e stati */
  --acc: #ffb84d;
  --acc-testo: #ffc56e;
  --acc-deep: #e89a2a;
  --su-acc: #2a1800;
  --ind: #9db4ff;
  --warm: #ff9260;
  --good: #8fdcaa;
  --bad: #ff7b7b;
  --sun: #ffc857;

  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow: 0 30px 80px -24px rgba(0, 8, 10, 0.7);
  --shadow-soft: 0 14px 32px -16px rgba(0, 8, 10, 0.65);
  --inset-hi: inset 0 1px 0 rgba(244, 236, 220, 0.05);
  --velo: rgba(0, 14, 17, 0.66);

  --sky-1: #032026;
  --sky-2: #0a3a44;
  --sky-3: #042a31;
  --tint: rgba(255, 184, 77, 0.08);

  /* colori delle famiglie: punti del radar e legenda (vivi, leggibili sul petrolio) */
  --k-ristorante: #9fb2ff;
  --k-trattoria: #f19aa8;
  --k-pizzeria: #ff9469;
  --k-agriturismo: #c3d677;
  --k-quota: #a6dcec;
  --k-bar: #dcae8a;
  --k-veloce: #f3cd55;

  /* insegne smaltate: il fondo delle targhe */
  --t-ristorante: #26396a;
  --t-trattoria: #7b2632;
  --t-pizzeria: #b0402a;
  --t-agriturismo: #4c5a24;
  --t-quota: #2f5868;
  --t-bar: #573626;
  --t-veloce: #9a6c14;
  --t-filetto: rgba(255, 241, 214, 0.55);
  --t-scritta: #fbf1dc;

  /* radar */
  --radar-centro: rgba(255, 184, 77, 0.07);
  --radar-fondo: rgba(244, 236, 220, 0.015);
  --radar-linea: #ffb84d;
  --radar-griglia: rgba(244, 236, 220, 0.12);

  font-family: var(--f-testo);
  font-synthesis: none;
}

/* Il fondo segue appena il momento della giornata: lo stesso petrolio, una luce diversa */
body[data-momento="colazione"] { --sky-2:#123f44; --tint:rgba(255,196,140,.12); }
body[data-momento="pranzo"]    { --sky-2:#0a3a44; --tint:rgba(255,184,77,.09); }
body[data-momento="merenda"]   { --sky-2:#0d3c42; --tint:rgba(255,200,87,.1); }
body[data-momento="aperitivo"] { --sky-2:#163640; --tint:rgba(255,140,90,.14); }
body[data-momento="cena"]      { --sky-1:#021a20; --sky-2:#06303a; --sky-3:#03232a; --tint:rgba(255,184,77,.07); }
body[data-momento="tardi"]     { --sky-1:#01161b; --sky-2:#052a32; --sky-3:#021e24; --tint:rgba(157,180,255,.06); }

html[data-theme="light"] {
  color-scheme: light;
  --ink: #062a31;
  --muted: #2b4a50;
  --faint: #587076;
  --body-text: #173b42;
  --line: rgba(6, 42, 49, 0.13);
  --line-soft: rgba(6, 42, 49, 0.07);
  --line-forte: rgba(6, 42, 49, 0.24);
  --card: #ffffff;
  --card-hi: #fbfaf6;
  --sheet: rgba(250, 248, 242, 0.98);
  --sheet-solido: #faf8f2;
  --ctl: rgba(6, 42, 49, 0.06);
  --ctl-strong: rgba(6, 42, 49, 0.1);
  --fade-1: rgba(239, 241, 236, 0.97);
  --fade-mid: rgba(239, 241, 236, 0.72);
  --fade-0: rgba(239, 241, 236, 0);
  --tab-on: rgba(196, 120, 0, 0.22);
  --acc: #ffb84d;
  --acc-testo: #a35f00;
  --acc-deep: #c47800;
  --su-acc: #2a1800;
  --warm: #c4561f;
  --good: #1d8a52;
  --bad: #c4343f;
  --sun: #d68a00;
  --shadow: 0 30px 70px -26px rgba(6, 42, 49, 0.3);
  --shadow-soft: 0 12px 28px -16px rgba(6, 42, 49, 0.32);
  --inset-hi: inset 0 0 0 1px rgba(6, 42, 49, 0.06);
  --velo: rgba(6, 42, 49, 0.32);
  --sky-1: #eef0eb;
  --sky-2: #e2ebe7;
  --sky-3: #eef0eb;
  --tint: rgba(255, 184, 77, 0.16);
  --k-ristorante: #3d55a8;
  --k-trattoria: #a3283c;
  --k-pizzeria: #c4441f;
  --k-agriturismo: #5c6d1d;
  --k-quota: #2d7086;
  --k-bar: #7a4b2f;
  --k-veloce: #a87500;
  --radar-centro: rgba(255, 255, 255, 0.9);
  --radar-fondo: rgba(255, 255, 255, 0.4);
  --radar-linea: #c47800;
  --radar-griglia: rgba(6, 42, 49, 0.13);
}
html[data-theme="light"] body[data-momento] { --sky-1: #eef0eb; --sky-2: #e3ece8; --sky-3: #eef0eb; --tint: rgba(255, 184, 77, 0.16); }
html[data-theme="light"] body[data-momento="aperitivo"],
html[data-theme="light"] body[data-momento="colazione"] { --sky-2: #f1e6d6; }

/* ── Schermo: grandezza del testo e tema «Notte» (come JustMeteo) ─────────
   Quasi tutte le misure del testo sono in rem: basta cambiare la base.
   «Notte» è il tema scuro con un filtro che toglie il blu: luce calda e bassa. */
html[data-testo="grande"] { font-size: 114%; }
html[data-testo="enorme"] { font-size: 128%; }
html[data-notte], html[data-notte] body { background: #110e0e; }
html[data-notte] :is(.cielo, .velatura, .app, .foglio, .conferma, .avviso, .pagina, .pagina-gestore) {
  filter: sepia(1) saturate(.7) hue-rotate(307deg) brightness(.94);
}

/* ── Insegne ───────────────────────────────────────────────────────────── */
.insegna, .targhetta {
  --t: var(--t-ristorante);
  position: relative; overflow: hidden; color: var(--t-scritta);
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--t) 88%, #fff) 0%, var(--t) 46%, color-mix(in srgb, var(--t) 82%, #000) 100%);
}
:is(.insegna, .targhetta)[data-k="trattoria"]   { --t: var(--t-trattoria); }
:is(.insegna, .targhetta)[data-k="pizzeria"]    { --t: var(--t-pizzeria); }
:is(.insegna, .targhetta)[data-k="agriturismo"] { --t: var(--t-agriturismo); }
:is(.insegna, .targhetta)[data-k="quota"]       { --t: var(--t-quota); }
:is(.insegna, .targhetta)[data-k="bar"]         { --t: var(--t-bar); }
:is(.insegna, .targhetta)[data-k="veloce"]      { --t: var(--t-veloce); }
/* il filetto: la cornice dipinta delle insegne */
.insegna::before, .targhetta::before {
  content: ""; position: absolute; inset: 7px; border: 1px solid var(--t-filetto); border-radius: 6px; pointer-events: none;
}
.insegna {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 18px 20px; text-align: center;
}
.insegna-famiglia {
  font-family: var(--f-titolo); font-style: italic; font-weight: 500; font-size: .86rem; letter-spacing: .01em; opacity: .82;
}
.insegna-nome {
  margin: 0; font-family: var(--f-titolo); font-weight: 650; line-height: 1.02; letter-spacing: -.01em;
  text-wrap: balance; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
.insegna-nome[data-misura="xl"] { font-size: 2.05rem; }
.insegna-nome[data-misura="l"]  { font-size: 1.62rem; }
.insegna-nome[data-misura="m"]  { font-size: 1.32rem; }
.insegna-nome[data-misura="s"]  { font-size: 1.08rem; line-height: 1.08; }
.targhetta { display: grid; place-items: center; }
.targhetta::before { inset: 5px; border-radius: 5px; }
.targhetta span { font-family: var(--f-titolo); font-style: italic; font-weight: 600; font-size: 2.3rem; line-height: 1; transform: translateY(-1px); }