/* =====================================================================
   Tema "caldo e giocoso" (claymorphism leggero) sopra la struttura di style.css.
   Scelte (design system ui-ux-pro-max + verifica dei contrasti WCAG):
   - un solo colore principale, arancio caldo, con testo scuro sopra (7,6:1);
   - intestazione con sfumatura "aurora" chiara di toni vicini (albicocca, ambra, pesca),
     non un arcobaleno, e testo scuro (12,9:1);
   - testi secondari >= 4,5:1 in chiaro e in scuro; superfici morbide a doppia ombra;
   - i colori vivaci restano per le illustrazioni (copertine, icone del menu, grafici).
   ===================================================================== */
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fonts/nunito-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Fredoka"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(/fonts/fredoka-latin.woff2) format("woff2");
}

:root {
  --bg: #fff8f1; --surface: #ffffff; --surface-2: #fff1e4; --surface-3: #ffe4cc;
  --ink: #2b2118; --ink-2: #4a3c30; --muted: #6b5e52; --line: #f3e2cf;
  --primary: #fb923c; --primary-2: #f97316; --primary-ink: #2b1608; --primary-press: #ea580c;
  --accent: #c2410c; --accent-hover: #9a3412; --accent-ink: #ffffff;
  --accent-soft: #ffedd5; --accent-soft-ink: #9a3412;
  --rose: #e11d48; --teal: #0d9488; --blue: #2563eb; --violet: #7c3aed; --amber: #d97706;
  --success: #166534; --success-soft: #dcfce7; --warning: #92400e; --warning-soft: #fef3c7;
  --info: #1e40af; --info-soft: #dbeafe; --danger: #b91c1c; --danger-soft: #fee2e2; --star: #f59e0b;
  --radius-lg: 24px; --radius: 18px; --radius-sm: 12px;
  --clay: 0 1px 1px rgba(120, 60, 10, .06), 0 10px 24px -14px rgba(120, 60, 10, .35), inset 0 1px 0 rgba(255, 255, 255, .9);
  --clay-sm: 0 1px 1px rgba(120, 60, 10, .06), 0 6px 14px -10px rgba(120, 60, 10, .35), inset 0 1px 0 rgba(255, 255, 255, .9);
  --shadow-xs: var(--clay-sm); --shadow-sm: var(--clay-sm); --shadow: var(--clay);
  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif;
  --serif: var(--display);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1512; --surface: #231c17; --surface-2: #2d241d; --surface-3: #3a2f26;
    --ink: #fbf4ec; --ink-2: #e8dccf; --muted: #bbaa98; --line: #3a2f26;
    --primary: #fb923c; --primary-2: #f97316; --primary-ink: #1f1a17; --primary-press: #ea580c;
    --accent: #fdba74; --accent-hover: #fed7aa; --accent-ink: #1f1a17; --accent-soft: rgba(251, 146, 60, .16); --accent-soft-ink: #fdba74;
    --rose: #fb7185; --teal: #2dd4bf; --blue: #60a5fa; --violet: #a78bfa; --amber: #fbbf24;
    --success: #86efac; --success-soft: rgba(34, 197, 94, .14); --warning: #fcd34d; --warning-soft: rgba(245, 158, 11, .14);
    --info: #93c5fd; --info-soft: rgba(59, 130, 246, .16); --danger: #fca5a5; --danger-soft: rgba(239, 68, 68, .14);
    --clay: 0 1px 1px rgba(0, 0, 0, .3), 0 12px 26px -14px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
    --clay-sm: 0 1px 1px rgba(0, 0, 0, .3), 0 6px 14px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
  }
}
:root[data-theme="dark"] {
  --bg: #1a1512; --surface: #231c17; --surface-2: #2d241d; --surface-3: #3a2f26;
  --ink: #fbf4ec; --ink-2: #e8dccf; --muted: #bbaa98; --line: #3a2f26;
  --primary: #fb923c; --primary-2: #f97316; --primary-ink: #1f1a17; --primary-press: #ea580c;
  --accent: #fdba74; --accent-hover: #fed7aa; --accent-ink: #1f1a17; --accent-soft: rgba(251, 146, 60, .16); --accent-soft-ink: #fdba74;
  --rose: #fb7185; --teal: #2dd4bf; --blue: #60a5fa; --violet: #a78bfa; --amber: #fbbf24;
  --success: #86efac; --success-soft: rgba(34, 197, 94, .14); --warning: #fcd34d; --warning-soft: rgba(245, 158, 11, .14);
  --info: #93c5fd; --info-soft: rgba(59, 130, 246, .16); --danger: #fca5a5; --danger-soft: rgba(239, 68, 68, .14);
  --clay: 0 1px 1px rgba(0, 0, 0, .3), 0 12px 26px -14px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
  --clay-sm: 0 1px 1px rgba(0, 0, 0, .3), 0 6px 14px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* ---------- Base ---------- */
body {
  font-size: 16px;
  background:
    radial-gradient(60vmax 40vmax at 0% -10%, color-mix(in srgb, #fdba74 22%, transparent), transparent 60%),
    radial-gradient(50vmax 40vmax at 110% 0%, color-mix(in srgb, #fde68a 20%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
h1, h2, h3, .brand b, .hero-stat .n, .kpi .n { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }
h1 { font-weight: 700; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary-2) 70%, transparent); outline-offset: 2px; }
a { color: var(--accent); }

/* ---------- Marchio e menu ---------- */
.brand b em { color: var(--primary-2); }
.nav a { font-weight: 700; }
.nav a[href="#/"] .ico { color: var(--primary-press); }
.nav a[href="#/libri"] .ico { color: var(--violet); }
.nav a[href="#/desideri"] .ico { color: var(--rose); }
.nav a[href="#/prestiti"] .ico { color: var(--blue); }
.nav a[href="#/statistiche"] .ico { color: var(--violet); }
.nav a[href="#/impostazioni"] .ico { color: var(--teal); }
.nav a[href="#/aggiungi"] .ico { color: var(--amber); }
.nav a .ico { transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.nav a:active .ico { transform: scale(.9); }
.avatar { background: linear-gradient(135deg, #fdba74, #f97316); color: var(--primary-ink); box-shadow: var(--clay-sm); }
@media (min-width: 1024px) {
  .topbar { background: color-mix(in srgb, var(--surface) 85%, transparent); }
  .nav a.active { background: var(--accent-soft); color: var(--accent-soft-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); }
}
@media (max-width: 1023px) {
  .nav { box-shadow: 0 -8px 24px -18px rgba(120, 60, 10, .45); }
  .nav a { color: var(--muted); }
  .nav a.active { color: var(--ink); }
  .nav a.active .ico { background: color-mix(in srgb, currentColor 14%, transparent); }
  /* Pulsante centrale: solo icona, contrasto non testuale >= 3:1 */
  .nav a[href="#/aggiungi"] .ico {
    color: #fff; background: linear-gradient(180deg, #f97316, #ea580c); border-radius: 18px;
    box-shadow: 0 10px 20px -8px rgba(234, 88, 12, .7), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .12);
  }
  .nav a[href="#/aggiungi"].active .ico { background: linear-gradient(180deg, #ea580c, #c2410c); }
}

/* ---------- Superfici "clay" ---------- */
.card { border: 1px solid var(--line); box-shadow: var(--clay); }
input[type=text], input[type=search], input[type=password], input[type=number], input[type=date], input[type=email], select, textarea {
  border: 1.5px solid var(--line); background-color: var(--surface); box-shadow: inset 0 2px 4px rgba(120, 60, 10, .05);
}
input:focus, select:focus, textarea:focus { border-color: var(--primary-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent); }

/* ---------- Bottoni: pressione morbida ---------- */
.btn {
  border: 1px solid var(--line); border-radius: 14px; font-weight: 700; box-shadow: var(--clay-sm);
  transition: transform .2s ease-out, box-shadow .2s ease-out, background .2s ease-out, filter .2s ease-out;
}
.btn:hover { transform: translateY(-1px); background: var(--surface-2); }
.btn:active { transform: translateY(1px) scale(.98); box-shadow: inset 0 2px 6px rgba(120, 60, 10, .15); }
.btn.primary {
  background: linear-gradient(180deg, #fdba74 0%, var(--primary) 55%, var(--primary-2) 100%); border-color: transparent; color: var(--primary-ink);
  box-shadow: 0 10px 22px -10px rgba(234, 88, 12, .65), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(154, 52, 18, .18);
}
.btn.primary:hover { filter: brightness(1.04) saturate(1.05); background: linear-gradient(180deg, #fdba74 0%, var(--primary) 55%, var(--primary-2) 100%); }
.btn.primary:active { box-shadow: inset 0 3px 8px rgba(154, 52, 18, .35); }
.btn.magic {
  background: linear-gradient(180deg, #ede9fe, #ddd6fe); color: #5b21b6; border-color: transparent;
  box-shadow: 0 8px 18px -10px rgba(124, 58, 237, .55), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.btn.magic:hover { background: linear-gradient(180deg, #f5f3ff, #ddd6fe); }
.btn.ghost, .btn.back { box-shadow: none; border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--danger); }

/* ---------- Home: intestazione "aurora" calda ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate; padding: 26px 24px; border-radius: 28px; color: var(--ink);
  background: #ffe8d1; border: 1px solid #fcd9b8;
  box-shadow: 0 18px 40px -24px rgba(194, 65, 12, .55), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.hero::before {
  content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 45% at 15% 20%, #fde68a 0%, transparent 70%),
    radial-gradient(45% 50% at 85% 15%, #fdba74 0%, transparent 70%),
    radial-gradient(40% 45% at 70% 90%, #fecdd3 0%, transparent 70%),
    radial-gradient(35% 40% at 10% 95%, #fed7aa 0%, transparent 70%);
  animation: aurora 16s ease-in-out infinite alternate;
}
.hero::after {
  content: ""; position: absolute; right: -18px; bottom: -22px; width: 150px; height: 150px; z-index: -1; opacity: .5; pointer-events: none;
  background: url(/icon.svg?v=3) center / contain no-repeat; transform: rotate(-12deg); filter: saturate(.9);
  -webkit-mask: radial-gradient(circle at 60% 60%, #000 40%, transparent 72%); mask: radial-gradient(circle at 60% 60%, #000 40%, transparent 72%);
}
@keyframes aurora {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(4%, -3%, 0) rotate(8deg); }
}
.hero h1 { color: var(--ink); }
.hero .sub { color: var(--ink-2); font-weight: 600; }
.hero .actions .btn:not(.primary) { background: rgba(255, 255, 255, .75); border-color: rgba(255, 255, 255, .9); color: var(--ink); }
.hero .actions .btn:not(.primary):hover { background: #fff; }
.hero-stat { background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 6px 16px -12px rgba(154, 52, 18, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-stat .tile { background: var(--accent-soft); color: var(--accent); }
.hero-stat:nth-child(2) .tile { background: #dcfce7; color: #15803d; }
.hero-stat:nth-child(3) .tile { background: #fef3c7; color: #b45309; }
.hero-stat:nth-child(4) .tile { background: #dbeafe; color: #1d4ed8; }
.hero-stat .l { color: var(--muted); font-weight: 700; }
a.hero-stat:hover { transform: translateY(-2px); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero { background: #2a1e16; border-color: #3d2c1f; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9); }
  :root:not([data-theme="light"]) .hero::before { opacity: .28; }
  :root:not([data-theme="light"]) .hero .actions .btn:not(.primary), :root:not([data-theme="light"]) .hero-stat { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: var(--ink); }
  :root:not([data-theme="light"]) .hero-stat .tile { background: rgba(255, 255, 255, .08); }
}
:root[data-theme="dark"] .hero { background: #2a1e16; border-color: #3d2c1f; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9); }
:root[data-theme="dark"] .hero::before { opacity: .28; }
:root[data-theme="dark"] .hero .actions .btn:not(.primary), :root[data-theme="dark"] .hero-stat { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: var(--ink); }
:root[data-theme="dark"] .hero-stat .tile { background: rgba(255, 255, 255, .08); }
@media (max-width: 1023px) {
  .hero { padding: 20px 18px; border-radius: 24px; }
  .hero h1 { font-size: 1.55rem; }
  .hero::after { width: 96px; height: 96px; right: -14px; top: 10px; bottom: auto; opacity: .3; }
  .hero .actions .btn:not(.primary) { flex: 1 1 0; min-width: 0; padding: 8px 10px; font-size: .88rem; }
}

/* ---------- Libri, stati, controlli ---------- */
.cover { border-radius: 6px 12px 12px 6px; }
.book-card:hover .cover { transform: translateY(-5px) rotate(-1.2deg); }
.book-card .t { font-weight: 800; }
.gen .gt { font-family: var(--display); font-weight: 600; }
.badge { font-weight: 800; }
.badge.read { background: var(--success-soft); color: var(--success); }
.badge.reading { background: var(--warning-soft); color: var(--warning); }
.badge.loan { background: var(--info-soft); color: var(--info); }
.chip { border: 1.5px solid var(--line); font-weight: 700; box-shadow: var(--clay-sm); }
.chip.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--primary) 55%, transparent); color: var(--accent-soft-ink); box-shadow: none; }
.seg { background: var(--surface-2); box-shadow: inset 0 2px 4px rgba(120, 60, 10, .08); }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--clay-sm); }
.stars button:hover { transform: scale(1.2) rotate(-8deg); }
.searchbox input { border-radius: 16px; }
.facts { border-radius: var(--radius); }
.facts dt { font-weight: 700; color: var(--muted); }
.hero-stat .n, .kpi .n { font-weight: 600; }

/* ---------- Statistiche ---------- */
.kpis .kpi:nth-child(6n+1) .n { color: var(--accent); }
.kpis .kpi:nth-child(6n+2) .n { color: var(--teal); }
.kpis .kpi:nth-child(6n+3) .n { color: var(--success); }
.kpis .kpi:nth-child(6n+4) .n { color: var(--blue); }
.kpis .kpi:nth-child(6n+5) .n { color: var(--violet); }
.kpis .kpi:nth-child(6n) .n { color: var(--rose); }
.bar .fill { background: linear-gradient(90deg, #fdba74, #f97316); }
.bar:nth-child(3n+2) .fill { background: linear-gradient(90deg, #5eead4, #0d9488); }
.bar:nth-child(3n) .fill { background: linear-gradient(90deg, #c4b5fd, #7c3aed); }
.medal.on { border-color: color-mix(in srgb, var(--star) 55%, var(--line)); background: linear-gradient(180deg, var(--warning-soft), var(--surface)); }
.progress i { background: linear-gradient(90deg, #fdba74, #f97316); }

/* ---------- Varie ---------- */
.install-card { border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 75%); }
.loc-ico { background: var(--accent-soft); color: var(--accent); }
.toast { background: #2b2118; color: #fff8f1; font-weight: 700; border-radius: 16px; }
.login .logo { border-radius: 18px; box-shadow: var(--clay); }
.login h1 em { color: var(--primary-2); }
.empty { border-style: dashed; border-color: #f3d7bb; }

@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}