/* base.css — design system "Estate della 5A".
   Kid-friendly: colori caldi, angoli morbidi, touch target grandi, font di sistema
   (nessuna risorsa esterna, funziona offline). Mobile-first. */

:root {
  --sole: #FFB703;
  --sole-scuro: #FB8500;
  --mare: #219EBC;
  --mare-scuro: #126782;
  --notte: #023047;
  --cielo: #8ECAE6;
  --prato: #52B788;
  --carta: #FFFDF7;
  --corallo: #FB8500;
  --rosso: #E5484D;
  --verde-ok: #2FA84F;

  --ombra: 0 10px 30px rgba(2, 48, 71, .12);
  --ombra-morbida: 0 4px 14px rgba(2, 48, 71, .08);
  --raggio: 18px;
  --raggio-grande: 28px;
  --tap: 48px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--notte);
  background:
    radial-gradient(1200px 500px at 80% -5%, #FFE8B0 0%, transparent 60%),
    linear-gradient(180deg, #FFF6E5 0%, #EAF7FB 55%, #DCF1F7 100%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }

a { color: var(--mare-scuro); }

/* ---- barra di navigazione superiore ---- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: rgba(255, 253, 247, .9);
  backdrop-filter: blur(8px);
  box-shadow: var(--ombra-morbida);
}
.topbar .logo {
  font-weight: 900; font-size: 1.05rem; color: var(--notte);
  text-decoration: none; display: flex; align-items: center; gap: 8px;
}
.topbar .spacer { flex: 1; }
.topbar a.btn-nav {
  text-decoration: none; color: var(--mare-scuro); font-weight: 700;
  padding: 8px 14px; border-radius: 999px; min-height: var(--tap);
  display: inline-flex; align-items: center; gap: 6px;
}
.topbar a.btn-nav:hover { background: #ffffffcc; }

/* ---- contenitore ---- */
.wrap { max-width: 900px; margin: 0 auto; padding: 20px 16px 80px; }

.breadcrumb { font-size: .9rem; color: var(--mare-scuro); margin-bottom: 14px; }
.breadcrumb a { text-decoration: none; font-weight: 600; }

/* ---- bottoni ---- */
.btn {
  font-family: var(--font); font-weight: 800; font-size: 1rem;
  border: none; border-radius: 999px; cursor: pointer;
  min-height: var(--tap); padding: 12px 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .08s ease, box-shadow .15s ease;
  text-decoration: none;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primario { background: var(--sole-scuro); color: #fff; box-shadow: 0 6px 16px rgba(251, 133, 0, .35); }
.btn-mare { background: var(--mare); color: #fff; box-shadow: 0 6px 16px rgba(33, 158, 188, .3); }
.btn-chiaro { background: #fff; color: var(--mare-scuro); box-shadow: var(--ombra-morbida); }
.btn-ghost { background: transparent; color: var(--mare-scuro); }
.btn-ripasso { background: #FFF3D6; color: var(--sole-scuro); border: 2px solid #FFE0A3; }

/* ---- card ---- */
.card {
  background: var(--carta); border-radius: var(--raggio-grande);
  box-shadow: var(--ombra); padding: 22px; margin-bottom: 18px;
}
.card h2 { margin-bottom: 6px; }

/* ---- badge di stato ---- */
.stato { font-size: 1.3rem; }
.stato.fatto::before { content: '✅'; }
.stato.corso::before { content: '◐'; }
.stato.vuoto::before { content: '⚪'; }

.pill {
  display: inline-block; font-size: .8rem; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; background: #EAF7FB; color: var(--mare-scuro);
}
.pill.scadenza { background: #FFEfE0; color: var(--sole-scuro); }

/* ---- footer ---- */
.footer {
  text-align: center; color: var(--mare-scuro); font-size: .85rem;
  padding: 30px 16px; opacity: .85;
}

/* ---- utilità ---- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.center { text-align: center; }
.mt { margin-top: 16px; }
.muted { color: var(--mare-scuro); }

/* rispetta chi preferisce meno animazioni */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}