/* Bimbi Naturali — component styles. Every value comes from tokens.json. */
body { background: var(--carta); color: var(--inchiostro); font-family: var(--font-testo); font-size: 17px; line-height: 26px; margin: 0; }
.bn-stack { display: flex; flex-direction: column; gap: var(--spazio-4); padding: var(--spazio-6); }
.bn-row { display: flex; flex-wrap: wrap; gap: var(--spazio-3); align-items: center; }
.bn-caption { font: 400 15px/22px var(--font-testo); color: var(--inchiostro-tenue); }

/* Bottone */
.bn-bottone { display: inline-flex; align-items: center; gap: var(--spazio-2); font: 700 15px/20px var(--font-testo); letter-spacing: 0.01em; padding: var(--spazio-3) var(--spazio-6); border-radius: var(--raggio-pillola); border: 2px solid transparent; cursor: pointer; text-decoration: none; }
.bn-bottone:focus-visible { outline: 2px solid var(--cielo); outline-offset: 2px; }
.bn-bottone--primario { background: var(--bosco); color: var(--on-bosco); }
.bn-bottone--primario:hover { filter: brightness(1.08); }
.bn-bottone--sole { background: var(--sole); color: var(--on-sole); }
.bn-bottone--secondario { background: transparent; color: var(--bosco); border-color: var(--bosco); }
.bn-bottone--secondario:hover { background: var(--bosco-tenue); }
.bn-bottone--testo { background: transparent; color: var(--bosco); padding-inline: var(--spazio-2); text-decoration: underline; text-decoration-color: var(--sole); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.bn-bottone[disabled] { background: var(--foglia); color: var(--inchiostro-tenue); border-color: transparent; cursor: not-allowed; filter: none; }

/* Etichetta */
.bn-etichetta { display: inline-flex; align-items: center; gap: var(--spazio-1); font: 700 13px/16px var(--font-testo); letter-spacing: 0.06em; text-transform: uppercase; padding: var(--spazio-1) var(--spazio-3); border-radius: var(--raggio-pillola); background: var(--foglia); color: var(--inchiostro); }
.bn-etichetta--bosco { background: var(--bosco); color: var(--on-bosco); }
.bn-etichetta--sole { background: var(--sole); color: var(--on-sole); }
.bn-etichetta--contorno { background: transparent; color: var(--inchiostro-tenue); box-shadow: inset 0 0 0 1.5px var(--inchiostro-tenue); }
.bn-etichetta--avviso { background: transparent; color: var(--melograno); box-shadow: inset 0 0 0 1.5px var(--melograno); }
.bn-etichetta--info { background: transparent; color: var(--cielo); box-shadow: inset 0 0 0 1.5px var(--cielo); }

/* Avviso */
.bn-avviso { background: var(--carta-viva); border-radius: var(--raggio-m); padding: var(--spazio-6); display: grid; grid-template-columns: auto 1fr; gap: var(--spazio-2) var(--spazio-4); max-width: 520px; }
.bn-avviso__data { grid-row: span 3; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 72px; border-radius: var(--raggio-m); background: var(--bosco); color: var(--on-bosco); }
.bn-avviso__giorno { font: 600 28px/30px var(--font-display); }
.bn-avviso__mese { font: 700 12px/14px var(--font-testo); letter-spacing: 0.06em; text-transform: uppercase; }
.bn-avviso__eyebrow { font: 700 13px/16px var(--font-testo); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sole-testo); }
.bn-avviso__titolo { font: 600 22px/28px var(--font-display); margin: 0; text-wrap: balance; }
.bn-avviso__testo { margin: 0; color: var(--inchiostro); }
.bn-avviso__azioni { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--spazio-2); margin-top: var(--spazio-2); }
.bn-avviso--sole .bn-avviso__data { background: var(--sole); color: var(--on-sole); }

/* Giornata */
.bn-giornata { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 520px; }
.bn-giornata__voce { display: grid; grid-template-columns: 112px 1fr; gap: var(--spazio-4); padding: var(--spazio-3) var(--spazio-4); border-bottom: 1px solid var(--linea); }
.bn-giornata__ora { font: 400 15px/22px var(--font-testo); color: var(--inchiostro-tenue); font-variant-numeric: tabular-nums; }
.bn-giornata__cosa { font: 400 17px/22px var(--font-testo); }
.bn-giornata__chi { display: block; font: 400 15px/22px var(--font-testo); color: var(--inchiostro-tenue); }
.bn-giornata__voce--atelier { background: var(--bosco-tenue); border-radius: var(--raggio-m); border-bottom-color: transparent; }
.bn-giornata__voce--atelier .bn-giornata__cosa { font: 600 20px/26px var(--font-display); color: var(--inchiostro); }

/* Etichetta di stagione: un pallino del colore della stagione, testo in inchiostro */
.bn-etichetta--stagione { background: var(--foglia); color: var(--inchiostro); }
.bn-etichetta--stagione::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--bn-stagione, var(--bosco)); }
.bn-autunno { --bn-stagione: var(--stagione-autunno); }
.bn-inverno { --bn-stagione: var(--stagione-inverno); }
.bn-primavera { --bn-stagione: var(--stagione-primavera); }
.bn-estate { --bn-stagione: var(--stagione-estate); }

/* Zainetto */
.bn-zainetto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spazio-4); }
.bn-zainetto__gruppo { background: var(--carta-viva); border-radius: var(--raggio-m); padding: var(--spazio-4) var(--spazio-6) var(--spazio-6); display: flex; flex-direction: column; gap: var(--spazio-3); min-width: 0; }
.bn-zainetto__titolo { font: 600 20px/26px var(--font-display); margin: 0; color: var(--inchiostro); }
.bn-zainetto__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spazio-2); }
.bn-zainetto__voce { display: flex; gap: var(--spazio-3); align-items: flex-start; font: 400 16px/22px var(--font-testo); color: var(--inchiostro); cursor: pointer; }
.bn-zainetto__voce input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--bosco); flex: none; }
.bn-zainetto__voce input:focus-visible { outline: 2px solid var(--cielo); outline-offset: 2px; }
.bn-zainetto__voce input:checked + span { color: var(--inchiostro-tenue); text-decoration: line-through; text-decoration-color: var(--linea); }