/* Token di Material 3 Expressive per l'app di Tabacchi La Sicilia.
   Colori: material-color-utilities 0.4.0, specifica 2025, seme #f99a00 (arancio del logo), accenti Vibrant e
   superfici grigie a croma 0 (come il tema scuro classico di Android); si rigenerano con strumenti/palette.html. Tipografia, forme, movimento e stati seguono
   le scale di m3.material.io. Nei componenti si usano solo questi token, mai valori scritti a mano. */

/* Prototipo: font da Google Fonts. Nella versione vera vanno ospitati nel sito (niente consenso). */
@import url("caratteri.css");

:root {
  color-scheme: light;
  --md-sys-color-primary: #844f00;
  --md-sys-color-on-primary: #fff0e4;
  --md-sys-color-primary-container: #fe9d00;
  --md-sys-color-on-primary-container: #4b2b00;
  --md-sys-color-inverse-primary: #fe9d00;
  --md-sys-color-secondary: #7c5400;
  --md-sys-color-on-secondary: #fff0e0;
  /* scelta di Thomas del 23/10/2026: in chiaro gli accenti tonali (pillola della barra, pulsanti tonali, chip scelti,
     cerchi numerati) usano l'arancio del logo; il grigio sembrava poco un pulsante. In scuro sono grigi con il segno
     arancio (sotto). Il binario di onda e passi resta chiaro: --ls-traccia. */
  --md-sys-color-secondary-container: var(--md-sys-color-primary-container);
  --md-sys-color-on-secondary-container: var(--md-sys-color-on-primary-container);
  --ls-traccia: #ffc974;
  --md-sys-color-tertiary: #675c00;
  --md-sys-color-on-tertiary: #fff4ba;
  --md-sys-color-tertiary-container: #fde74f;
  --md-sys-color-on-tertiary-container: #5e5400;
  --md-sys-color-error: #b02500;
  --md-sys-color-on-error: #ffefec;
  --md-sys-color-error-container: #f95630;
  --md-sys-color-on-error-container: #520c00;
  --md-sys-color-surface: #f6f6f6;
  --md-sys-color-surface-dim: #d4d4d4;
  --md-sys-color-surface-bright: #f6f6f6;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f1f1f1;
  --md-sys-color-surface-container: #e8e8e8;
  --md-sys-color-surface-container-high: #e2e2e2;
  --md-sys-color-surface-container-highest: #dddddd;
  --md-sys-color-on-surface: #2f2f2f;
  --md-sys-color-on-surface-variant: #5b5b5b;
  --md-sys-color-inverse-surface: #0e0e0e;
  --md-sys-color-inverse-on-surface: #9d9d9d;
  --md-sys-color-outline: #777777;
  --md-sys-color-outline-variant: #adadad;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --ls-superficie-scheda: var(--md-sys-color-surface-container-lowest);
  /* pulsante pieno: in chiaro l'arancio del logo (primary-container) col suo testo, perché il primary M3 dell'arancio
     a tono 40 è marrone (Thomas 27/10/2026); in scuro resta il primary, già arancio chiaro */
  --ls-pieno: var(--md-sys-color-primary-container);
  --ls-on-pieno: var(--md-sys-color-on-primary-container);
  /* testo sopra le foto (con il velo scuro sotto): bianco in entrambi i temi */
  --ls-color-su-foto: #ffffff;
  --ls-color-aperto: #426900;
  --ls-color-on-aperto: #ffffff;
  --ls-color-aperto-container: #c2f280;
  --ls-color-on-aperto-container: #112000;
  --ls-color-rosso: #bf021a;
  --ls-color-on-rosso: #ffffff;
  --ls-color-rosso-container: #ffdad6;
  --ls-color-on-rosso-container: #410003;
  /* Cielo delle Previsioni (25/10/2026): colori di scena, come una foto, non ruoli M3; il testo sopra ha il suo colore
     per scena (contrasto almeno 4.5:1 sul colore alto, dove sta il testo). Da confermare con Thomas. */
  --ls-cielo-sereno-alto: #5aa9ee; --ls-cielo-sereno-basso: #cfe6fb; --ls-cielo-sereno-testo: #0a2742;
  --ls-cielo-notte-alto: #0d1836; --ls-cielo-notte-basso: #2b3c6e; --ls-cielo-notte-testo: #ffffff;
  --ls-cielo-nuvoloso-alto: #9fb0c1; --ls-cielo-nuvoloso-basso: #dfe5eb; --ls-cielo-nuvoloso-testo: #17212b;
  --ls-cielo-pioggia-alto: #74869a; --ls-cielo-pioggia-basso: #b9c4d0; --ls-cielo-pioggia-testo: #0c131a;
  --ls-cielo-temporale-alto: #3f4458; --ls-cielo-temporale-basso: #7a7f94; --ls-cielo-temporale-testo: #ffffff;
  --ls-cielo-nebbia-alto: #c3cad0; --ls-cielo-nebbia-basso: #eceff1; --ls-cielo-nebbia-testo: #1f282e;
  --ls-cielo-sole: #ffd24d; --ls-cielo-alone: rgb(255 214 90 / 0.45); --ls-cielo-luna: #f4f1e4;
  --ls-cielo-nuvola: #ffffff; --ls-cielo-nuvola-velo: 0.92; --ls-cielo-nuvola-scura: #e8eef5; --ls-cielo-nuvola-scura-velo: 0.75; --ls-cielo-goccia: rgb(255 255 255 / 0.7); --ls-cielo-lampo: rgb(255 255 255 / 0.55);
  --ls-cielo-freddo: #5aa9ee;
  /* decorazioni di stagione della Home (js/festa.js): neve e petali, dietro le schede */
  --ls-festa-neve: #8fc3ee; --ls-festa-petalo-1: #f4a3c0; --ls-festa-petalo-2: #ecc94f; --ls-festa-petalo-3: #9fd492;

  /* Tipografia: scala M3 con Roboto Flex; le varianti "enfasi" sono quelle Expressive. */
  --md-ref-typeface: "Roboto Flex", system-ui, "Segoe UI", Roboto, sans-serif;
  --md-sys-typescale-display-large: 400 57px/64px var(--md-ref-typeface);   /* dalla scala M3, per la temperatura delle Previsioni */
  --md-sys-typescale-display-small: 400 36px/44px var(--md-ref-typeface);
  --md-sys-typescale-headline-large: 400 32px/40px var(--md-ref-typeface);
  --md-sys-typescale-headline-medium: 400 28px/36px var(--md-ref-typeface);
  --md-sys-typescale-headline-small: 400 24px/32px var(--md-ref-typeface);
  --md-sys-typescale-title-large: 400 22px/28px var(--md-ref-typeface);
  --md-sys-typescale-title-medium: 500 16px/24px var(--md-ref-typeface);
  --md-sys-typescale-title-small: 500 14px/20px var(--md-ref-typeface);
  --md-sys-typescale-body-large: 400 16px/24px var(--md-ref-typeface);
  --md-sys-typescale-body-medium: 400 14px/20px var(--md-ref-typeface);
  --md-sys-typescale-body-small: 400 12px/16px var(--md-ref-typeface);
  --md-sys-typescale-label-large: 500 14px/20px var(--md-ref-typeface);
  --md-sys-typescale-label-medium: 500 12px/16px var(--md-ref-typeface);
  --md-sys-typescale-label-small: 500 11px/16px var(--md-ref-typeface);
  --md-sys-typescale-emphasized-weight: 700;

  /* Forme: scala degli angoli M3 Expressive. */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-large-increased: 20px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-extra-large-increased: 32px;
  --md-sys-shape-corner-extra-extra-large: 48px;
  --md-sys-shape-corner-full: 999px;

  /* Movimento: molle dello schema Expressive (spaziali con rimbalzo, effetti senza), come curve CSS. */
  --md-sys-motion-spring-fast-spatial: linear(0, 0.074, 0.246, 0.453, 0.653, 0.821, 0.947, 1.03, 1.076, 1.094, 1.091, 1.078, 1.059, 1.039, 1.022, 1.009, 0.999, 0.994, 0.991, 0.991, 0.992, 0.994, 0.996, 0.997, 1);
  --md-sys-motion-spring-fast-spatial-duration: 357ms;
  --md-sys-motion-spring-default-spatial: linear(0, 0.049, 0.162, 0.302, 0.445, 0.578, 0.692, 0.786, 0.859, 0.914, 0.953, 0.98, 0.998, 1.008, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.007, 1.005, 1.004, 1.002, 1);
  --md-sys-motion-spring-default-spatial-duration: 421ms;
  --md-sys-motion-spring-default-effects: linear(0, 0.053, 0.169, 0.303, 0.433, 0.549, 0.648, 0.728, 0.793, 0.843, 0.882, 0.912, 0.935, 0.952, 0.965, 0.974, 0.981, 0.986, 0.99, 0.993, 0.995, 0.996, 0.997, 0.998, 1);
  --md-sys-motion-spring-default-effects-duration: 221ms;
  /* Cielo delle Previsioni: i soli movimenti in loop dell'app (eccezione voluta da Thomas il 25/10/2026), lenti apposta */
  --ls-moto-cielo-nuvole: 9s; --ls-moto-cielo-respiro: 2.6s; --ls-moto-cielo-stelle: 1.6s; --ls-moto-cielo-pioggia: 700ms;
  --ls-moto-cielo-pioggia-forte: 420ms; --ls-moto-cielo-neve: 2.4s; --ls-moto-festa-cade: 15s; --ls-moto-festa-gira: 5s; --ls-moto-cielo-lampo: 7s; --ls-moto-cielo-nebbia: 6s;

  /* Livelli di stato (hover, focus, pressione). */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.10;
  --md-sys-state-pressed-opacity: 0.10;

  /* Elevazione: solo dove serve staccare dallo sfondo (livelli 1 e 2). */
  --md-sys-elevation-level1: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15);
  --md-sys-elevation-level2: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15);
}

/* Tema scuro: segue il telefono ("Automatico") oppure la scelta in Altro → Aspetto. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    color-scheme: dark;
    --md-sys-color-primary: #ffb154;
    --md-sys-color-on-primary: #593400;
    --md-sys-color-primary-container: #fe9d00;
    --md-sys-color-on-primary-container: #4b2b00;
    --md-sys-color-inverse-primary: #895200;
    --md-sys-color-secondary: #f7ad1e;
    --md-sys-color-on-secondary: #4e3300;
    --md-sys-color-secondary-container: #383838;
    --md-sys-color-on-secondary-container: var(--md-sys-color-primary);
    --ls-traccia: #383838;
    --md-sys-color-tertiary: #fff4c1;
    --md-sys-color-on-tertiary: #685c00;
    --md-sys-color-tertiary-container: #fde74f;
    --md-sys-color-on-tertiary-container: #5e5400;
    --md-sys-color-error: #ff7351;
    --md-sys-color-on-error: #450900;
    --md-sys-color-error-container: #b92902;
    --md-sys-color-on-error-container: #ffd2c8;
    --md-sys-color-surface: #0e0e0e;
    --md-sys-color-surface-dim: #0e0e0e;
    --md-sys-color-surface-bright: #2c2c2c;
    --md-sys-color-surface-container-lowest: #000000;
    --md-sys-color-surface-container-low: #131313;
    --md-sys-color-surface-container: #191919;
    --md-sys-color-surface-container-high: #1f1f1f;
    --md-sys-color-surface-container-highest: #262626;
    --md-sys-color-on-surface: #ffffff;
    --md-sys-color-on-surface-variant: #ababab;
    --md-sys-color-inverse-surface: #f9f9f9;
    --md-sys-color-inverse-on-surface: #555555;
    --md-sys-color-outline: #757575;
    --md-sys-color-outline-variant: #484848;
    --ls-superficie-scheda: var(--md-sys-color-surface-container-high);
    --ls-pieno: var(--md-sys-color-primary);
    --ls-on-pieno: var(--md-sys-color-on-primary);
    --ls-color-aperto: #a7d567;
    --ls-color-on-aperto: #203600;
    --ls-color-aperto-container: #314f00;
    --ls-color-on-aperto-container: #c2f280;
    --ls-color-rosso: #ffb3ad;
    --ls-color-on-rosso: #680008;
    --ls-color-rosso-container: #930011;
    --ls-color-on-rosso-container: #ffdad6;
    --ls-cielo-sereno-alto: #0f3d70; --ls-cielo-sereno-basso: #2a6aa8; --ls-cielo-sereno-testo: #ffffff;
    --ls-cielo-notte-alto: #070d20; --ls-cielo-notte-basso: #18244a; --ls-cielo-notte-testo: #ffffff;
    --ls-cielo-nuvoloso-alto: #252d36; --ls-cielo-nuvoloso-basso: #3c4651; --ls-cielo-nuvoloso-testo: #ffffff;
    --ls-cielo-pioggia-alto: #19212b; --ls-cielo-pioggia-basso: #303c4a; --ls-cielo-pioggia-testo: #ffffff;
    --ls-cielo-temporale-alto: #15151f; --ls-cielo-temporale-basso: #2f3042; --ls-cielo-temporale-testo: #ffffff;
    --ls-cielo-nebbia-alto: #2a2f34; --ls-cielo-nebbia-basso: #41474d; --ls-cielo-nebbia-testo: #ffffff;
    --ls-cielo-sole: #ffcc3d; --ls-cielo-alone: rgb(255 200 61 / 0.3); --ls-cielo-luna: #e9e5d3;
    --ls-cielo-nuvola: #dce4ee; --ls-cielo-nuvola-velo: 0.3; --ls-cielo-nuvola-scura: #aab6c6; --ls-cielo-nuvola-scura-velo: 0.26; --ls-cielo-goccia: rgb(190 210 235 / 0.55); --ls-cielo-lampo: rgb(220 225 255 / 0.35);
    --ls-cielo-freddo: #6fb3f2;
  --ls-festa-neve: #e8f1fb; --ls-festa-petalo-1: #ffbcd3; --ls-festa-petalo-2: #fff0a8; --ls-festa-petalo-3: #cfeec6;
  }
}
:root[data-tema="scuro"] {
  color-scheme: dark;
  --md-sys-color-primary: #ffb154;
  --md-sys-color-on-primary: #593400;
  --md-sys-color-primary-container: #fe9d00;
  --md-sys-color-on-primary-container: #4b2b00;
  --md-sys-color-inverse-primary: #895200;
  --md-sys-color-secondary: #f7ad1e;
  --md-sys-color-on-secondary: #4e3300;
  /* scuro: grigio neutro con icona e testo arancio (scelta del 23/10/2026, vedi sopra) */
  --md-sys-color-secondary-container: #383838;
  --md-sys-color-on-secondary-container: var(--md-sys-color-primary);
  --ls-traccia: #383838;
  --md-sys-color-tertiary: #fff4c1;
  --md-sys-color-on-tertiary: #685c00;
  --md-sys-color-tertiary-container: #fde74f;
  --md-sys-color-on-tertiary-container: #5e5400;
  --md-sys-color-error: #ff7351;
  --md-sys-color-on-error: #450900;
  --md-sys-color-error-container: #b92902;
  --md-sys-color-on-error-container: #ffd2c8;
  --md-sys-color-surface: #0e0e0e;
  --md-sys-color-surface-dim: #0e0e0e;
  --md-sys-color-surface-bright: #2c2c2c;
  --md-sys-color-surface-container-lowest: #000000;
  --md-sys-color-surface-container-low: #131313;
  --md-sys-color-surface-container: #191919;
  --md-sys-color-surface-container-high: #1f1f1f;
  --md-sys-color-surface-container-highest: #262626;
  --md-sys-color-on-surface: #ffffff;
  --md-sys-color-on-surface-variant: #ababab;
  --md-sys-color-inverse-surface: #f9f9f9;
  --md-sys-color-inverse-on-surface: #555555;
  --md-sys-color-outline: #757575;
  --md-sys-color-outline-variant: #484848;
  --ls-superficie-scheda: var(--md-sys-color-surface-container-high);
  --ls-pieno: var(--md-sys-color-primary);
  --ls-on-pieno: var(--md-sys-color-on-primary);
  --ls-color-aperto: #a7d567;
  --ls-color-on-aperto: #203600;
  --ls-color-aperto-container: #314f00;
  --ls-color-on-aperto-container: #c2f280;
  --ls-color-rosso: #ffb3ad;
  --ls-color-on-rosso: #680008;
  --ls-color-rosso-container: #930011;
  --ls-color-on-rosso-container: #ffdad6;
  --ls-cielo-sereno-alto: #0f3d70; --ls-cielo-sereno-basso: #2a6aa8; --ls-cielo-sereno-testo: #ffffff;
  --ls-cielo-notte-alto: #070d20; --ls-cielo-notte-basso: #18244a; --ls-cielo-notte-testo: #ffffff;
  --ls-cielo-nuvoloso-alto: #252d36; --ls-cielo-nuvoloso-basso: #3c4651; --ls-cielo-nuvoloso-testo: #ffffff;
  --ls-cielo-pioggia-alto: #19212b; --ls-cielo-pioggia-basso: #303c4a; --ls-cielo-pioggia-testo: #ffffff;
  --ls-cielo-temporale-alto: #15151f; --ls-cielo-temporale-basso: #2f3042; --ls-cielo-temporale-testo: #ffffff;
  --ls-cielo-nebbia-alto: #2a2f34; --ls-cielo-nebbia-basso: #41474d; --ls-cielo-nebbia-testo: #ffffff;
  --ls-cielo-sole: #ffcc3d; --ls-cielo-alone: rgb(255 200 61 / 0.3); --ls-cielo-luna: #e9e5d3;
  --ls-cielo-nuvola: #dce4ee; --ls-cielo-nuvola-velo: 0.3; --ls-cielo-nuvola-scura: #aab6c6; --ls-cielo-nuvola-scura-velo: 0.26; --ls-cielo-goccia: rgb(190 210 235 / 0.55); --ls-cielo-lampo: rgb(220 225 255 / 0.35);
  --ls-cielo-freddo: #6fb3f2;
  --ls-festa-neve: #e8f1fb; --ls-festa-petalo-1: #ffbcd3; --ls-festa-petalo-2: #fff0a8; --ls-festa-petalo-3: #cfeec6;
}