/* Tema condiviso delle app Infallibile: token, reset e resa dei controlli di
   base, con chiaro/scuro automatico. Ogni app importa questo file e ridefinisce
   i soli token che la distinguono (tipicamente --accento) nel proprio CSS. */

:root
{
  --testo: #2b2620;
  --testo-tenue: #6b6375;
  --sfondo: #faf7f2;
  --pannello: #ffffff;
  --bordo: #e5e0d8;
  --accento: #c0392b;
  --accento-titolo: #2f6fed;
  /* Colori semantici (conferma/annulla/indietro e simili), distinti da
     --accento: quello è il colore di marca di ciascuna app (può non essere
     rosso su un'altra app), questi restano fissi perché il significato
     verde=ok/rosso=annulla/blu=torna indietro non deve dipendere dal tema */
  --verde: #2e7d32;
  --rosso: #c62828;
  --blu: #1565c0;
  color-scheme: light dark;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;

  /* Scala di spaziatura: ricalca i valori già ricorrenti in packages/ui/src/app.css,
     così tokenizzarli non cambia nulla a vista, solo il nome con cui si scrivono */
  --spazio-1: 0.25rem;
  --spazio-2: 0.5rem;
  --spazio-3: 0.75rem;
  --spazio-4: 1rem;
  --spazio-5: 1.5rem;
  --spazio-6: 2rem;

  /* Scala di raggi: qui il valore del pannello cambia deliberatamente (10px
     → --raggio-grande, 18px), è il punto dove si vede angoli più generosi */
  --raggio-piccolo: 6px;
  --raggio-medio: 12px;
  --raggio-grande: 18px;
  --raggio-pieno: 999px;

  /* Scala di taglie testo: prefisso "taglia-testo" e non "testo" perché
     quest'ultimo è già il token colore del testo (--testo) */
  --taglia-testo-xs: 0.8rem;
  --taglia-testo-sm: 0.9rem;
  --taglia-testo-md: 1rem;
  --taglia-testo-lg: 1.15rem;
  --taglia-testo-xl: 1.4rem;

  --transizione-durata: 160ms;
  --transizione-effetto: ease-out;

  /* Ombre tinte con --accento invece che nero piatto: propagano da sole la
     tinta di marca di ciascuna app (es. l'ambra di Pane) senza bisogno che
     l'app ridefinisca anche queste, dato che dipendono da --accento/--testo */
  --ombra-vicina: 0 1px 3px color-mix( in srgb, var( --testo ) 12%, transparent );
  --ombra-pannello: 0 6px 20px color-mix( in srgb, var( --accento ) 10%, transparent ),
                    0 2px 6px color-mix( in srgb, var( --testo ) 8%, transparent );
  --ombra-sospesa: 0 16px 40px color-mix( in srgb, var( --testo ) 16%, transparent ),
                   0 4px 12px color-mix( in srgb, var( --accento ) 14%, transparent );

  /* Per filter: drop-shadow() su immagini a fondo trasparente (foto di
     ricetta): segue la sagoma reale (alpha), non il riquadro come le
     --ombra-* sopra (pensate per box-shadow) — stesso motivo per cui è un
     token a sé invece di riusare --ombra-vicina. */
  --ombra-immagine: 0 4px 6px color-mix( in srgb, var( --testo ) 30%, transparent );
}

@media ( prefers-color-scheme: dark )
{
  :root
  {
    --testo: #ece7df;
    --testo-tenue: #a49c90;
    --sfondo: #1d1a17;
    --pannello: #272320;
    --bordo: #3d3831;
    --accento: #e07b5f;
    --accento-titolo: #5b9bff;
    --verde: #66bb6a;
    --rosso: #ef5350;
    --blu: #5b9bff;
  }
}

*
{
  box-sizing: border-box;
}

body
{
  margin: 0;
  color: var( --testo );
  background: var( --sfondo );
}

input, select, button
{
  font: inherit;
  color: inherit;
  background: var( --pannello );
  border: 1px solid var( --bordo );
  border-radius: var( --raggio-piccolo );
  padding: 0.35rem 0.5rem;
}

button
{
  cursor: pointer;
}

/* Le icone SVG (lucide-react) dentro un bottone hanno l'allineamento
   verticale di un'immagine inline, leggermente più alto della baseline del
   testo accanto: questo le riporta in asse senza dover avvolgere ogni icona
   in un wrapper dedicato */
button svg
{
  vertical-align: -0.125em;
}

/* Niente frecce di incremento/decremento sui campi numerici, salvo dove
   servono davvero (classe .con-frecce): per i piccoli aggiustamenti tipo
   temperature, numero pezzi, ore. Dove i valori sono troppo specifici perché
   un passo fisso abbia senso, le frecce restano nascoste. */
input[type='number']
{
  -moz-appearance: textfield;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button
{
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'].con-frecce
{
  -moz-appearance: auto;
}

input[type='number'].con-frecce::-webkit-inner-spin-button,
input[type='number'].con-frecce::-webkit-outer-spin-button
{
  -webkit-appearance: auto;
  margin: initial;
}

button:hover
{
  border-color: var( --accento );
}

/* Anello di focus colorato e ben visibile per la navigazione da tastiera:
   prima non c'era nulla di dedicato, si vedeva solo l'outline nativo del
   browser. Anche questo dipende da --accento-titolo, quindi resta coerente
   in ogni app senza bisogno di essere ridefinito */
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible
{
  outline: none;
  box-shadow: 0 0 0 3px color-mix( in srgb, var( --accento-titolo ) 35%, transparent );
}

/* Il layout della pagina è quello condiviso (@infallibile/ui/app.css,
   importato dalla pagina stessa) e il tema di base viene da
   @infallibile/tema: qui restano i soli token che distinguono Pane
   Infallibile — crosta dorata al posto del rosso pomodoro di Pizza. */

:root
{
  --accento: #a9642a;
  --accento-titolo: #8a5a2b;
}

@media ( prefers-color-scheme: dark )
{
  :root
  {
    --accento: #e0a35f;
    --accento-titolo: #d9a05a;
  }
}

/* Pagine statiche delle ricette (packages/ui/src/seo/): una colonna,
   pensata per la lettura su telefono. Usa i token del tema e dell'app,
   che il plugin mette prima di questo file nello stesso foglio. */

body
{
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
}

.testata, .ricetta, .indice, .piede
{
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 var(--spazio-4);
}

.testata
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spazio-4);
}

.testata-app
{
  font-weight: 700;
  color: var(--accento-titolo);
  text-decoration: none;
}

h1
{
  color: var(--accento-titolo);
  line-height: 1.2;
}

.ricetta-foto
{
  display: block;
  width: 100%;
  max-width: 32rem;
  height: auto;
  margin: 0 auto var(--spazio-4);
}

section
{
  margin-top: var(--spazio-6);
}

.dosi-per
{
  color: var(--testo-tenue);
  font-style: italic;
}

.stampa-ingredienti, .stampa-dettagli
{
  padding-left: 0;
  list-style: none;
}

.stampa-ingredienti li
{
  display: flex;
  gap: var(--spazio-2);
  padding: var(--spazio-1) 0;
  border-bottom: 1px solid var(--bordo);
}

.stampa-puntini
{
  flex: 1;
}

.timeline
{
  padding-left: var(--spazio-5);
}

.timeline > li
{
  margin-bottom: var(--spazio-3);
}

.timeline-durata
{
  color: var(--testo-tenue);
}

.rimando, .modifica
{
  margin-top: var(--spazio-4);
  padding: var(--spazio-4);
  background: var(--pannello);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-medio);
}

.modifica
{
  text-align: center;
}

.bottone
{
  display: inline-block;
  margin-top: var(--spazio-2);
  padding: var(--spazio-2) var(--spazio-4);
  background: var(--accento);
  color: #fff;
  border-radius: var(--raggio-pieno);
  font-weight: 600;
  text-decoration: none;
}

.schede
{
  padding-left: 0;
  list-style: none;
}

.schede li
{
  padding: var(--spazio-3) 0;
  border-bottom: 1px solid var(--bordo);
}

.schede a
{
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
  color: inherit;
}

.schede img
{
  flex: none;
  border-radius: var(--raggio-piccolo);
}

.schede.compatte
{
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax( 12rem, 1fr ) );
  gap: 0 var(--spazio-4);
}

.piede
{
  margin-top: var(--spazio-6);
  padding-bottom: var(--spazio-6);
  color: var(--testo-tenue);
}