/* ==========================================================================
   base.css — Design system condiviso delle pagine pubbliche (sito/).
   Token di tema, reset, sfondo ambientale, pulsanti, form e toggle tema.
   Il CSS di layout specifico di ogni pagina resta inline nella pagina stessa.
   ========================================================================== */

:root {
  /* Light Theme */
  --bg-main: #f8f9fa;
  --bg-section: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.72);
  --text-main: #111827;
  --text-muted: #6b7280;
  --accent-1: #2563eb; /* Blu */
  --accent-2: #7c3aed; /* Viola */
  --border-color: rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
  --green: #10b981;
  --danger: #ef4444;
  --border: rgba(0, 0, 0, 0.08); /* alias (usato da checkout/reset) */
}

[data-theme="dark"] {
  /* Dark Theme */
  --bg-main: #030712;
  --bg-section: #111827;
  --bg-glass: rgba(17, 24, 39, 0.72);
  --text-main: #f9fafb;
  --text-muted: #9ca3af;
  --accent-1: #3b82f6;
  --accent-2: #8b5cf6;
  --border-color: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.4);
  --border: rgba(255, 255, 255, 0.08);
}

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

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s ease, color .4s ease;
}

/* —— Sfondo ambientale (blob sfocati animati) —— */
.ambient-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ambient-blob { position: absolute; filter: blur(90px); opacity: .16; border-radius: 50%; animation: float 20s infinite ease-in-out alternate; }
.blob-1 { top: -10%; left: -8%; width: 48vw; height: 48vw; background: var(--accent-1); }
.blob-2 { bottom: -12%; right: -10%; width: 55vw; height: 55vw; background: var(--accent-2); animation-delay: -10s; }
.blob-3 { top: 30%; right: 30%; width: 30vw; height: 30vw; background: #0ea5e9; opacity: .10; animation-delay: -5s; }
@keyframes float {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(10%, 15%) scale(1.2); }
}

/* —— Testo gradiente —— */
.text-gradient {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* —— Pulsanti —— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem 2rem; border-radius: 99px;
  font-weight: 600; font-size: 1rem; text-decoration: none; border: none; cursor: pointer;
  font-family: inherit; transition: all .3s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff; box-shadow: 0 10px 20px -10px var(--accent-1);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 15px 25px -10px var(--accent-1); }
.btn-primary:disabled { opacity: .7; cursor: default; transform: none; }
.btn-secondary {
  background: var(--bg-section); color: var(--text-main);
  border: 1px solid var(--border-color);
}
.btn-secondary:hover { background: var(--border-color); }
.btn-ghost { background: transparent; color: var(--text-main); border: 1px solid var(--border-color); margin-top: .7rem; }
.btn-ghost:hover { background: var(--bg-section); }

.btn:focus-visible, .theme-toggle:focus-visible, .theme-fab:focus-visible {
  outline: 2px solid var(--accent-1); outline-offset: 2px;
}

/* —— Form —— */
.form-group { margin-bottom: 1.1rem; }
.form-label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .45rem; color: var(--text-main); }
.form-control {
  width: 100%;
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: .9rem 1rem;
  font-size: .98rem; font-family: inherit; color: var(--text-main);
  outline: none; transition: border-color .2s, box-shadow .2s;
  appearance: none; -webkit-appearance: none;
}
.form-control::placeholder { color: var(--text-muted); opacity: .6; }
.form-control:focus { border-color: var(--accent-1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-1) 18%, transparent); }
.select-wrap { position: relative; }
.select-wrap::after {
  content: ''; position: absolute; right: 1.1rem; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.hidden { display: none !important; }

/* —— Toggle tema (variante circolare) —— */
.theme-toggle {
  position: fixed; top: 1.5rem; right: 1.5rem; z-index: 100;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color); color: var(--text-main);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .2s, background .2s;
}
.theme-toggle:hover { transform: scale(1.05); background: var(--bg-section); }

/* —— Toggle tema (variante FAB quadrata) —— */
.theme-fab {
  position: fixed; top: 18px; right: 18px; z-index: 1060;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid #e4e7ec; background: #fff; color: #5a6170;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all .12s;
}
.theme-fab:hover { background: #f4f5f7; color: #1a1f2b; }
[data-theme="dark"] .theme-fab { background: #20242e; border-color: #2e3540; color: #9aa1ad; }
[data-theme="dark"] .theme-fab:hover { background: #262b36; color: #e9ebf0; }

@media (max-width: 560px) {
  .theme-toggle { top: 1rem; right: 1rem; width: 40px; height: 40px; }
}