/* ============================================================
   base.css — Reset, variabili globali, regole base
   Questo file deve essere importato per primo.
   ============================================================ */

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Variabili globali ─────────────────────────────────────── */
:root {
  /* Struttura — invariata tra i temi */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --radius:    12px;
  --radius-sm: 7px;
  --navbar-h:  60px;
  --transition: 250ms ease;
}

/* ── Tema chiaro (default) ─────────────────────────────────── */
[data-theme="default"] {
  --sage:   #A7AD89;
  --cream:  #DBD0C4;
  --moss:   #8C916C;
  --sand:   #B69C85;
  --forest: #697254;
  --earth:  #92735C;
  --red:    #a64444;

  --bg:          var(--cream);
  --bg-card:     #f4eee8;
  --bg-input:    #ffffff;
  --accent:      var(--forest);
  --accent-soft: rgba(105, 114, 84, 0.1);
  --text:        #2d2c24;
  --text-muted:  var(--earth);
  --border:      var(--sand);

  --shadow: 0 4px 20px rgba(105, 114, 84, 0.15);
}

/* ── Tema notturno ─────────────────────────────────────────── */
[data-theme="night"] {
  --sage:   #697763;
  --cream:  #16173A;
  --moss:   #2A4E63;
  --sand:   #443449;
  --forest: #B07D3A;
  --earth:  #2A4E63;
  --red:    #a64444;

  --bg:          #16173A;
  --bg-card:     #45223B;
  --bg-input:    #443449;
  --accent:      #B07D3A;
  --accent-soft: rgba(176, 125, 58, 0.15);
  --text:        #e8e0d5;
  --text-muted:  #697763;
  --border:      #443449;

  --shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ── Base ──────────────────────────────────────────────────── */
/* Lo scroll avviene su .main-content, non sul body */
body, html {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  height: 100%;
  overflow: hidden;
}
.hidden { display: none !important; }

/* ── Animazioni globali ────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Toast (notifiche globali) ─────────────────────────────── */
.toast {
  position: fixed; bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: .8rem 1.6rem; border-radius: 99px;
  font-weight: 600; font-size: .9rem;
  opacity: 0; pointer-events: none; z-index: 9999;
  transition: opacity .3s, transform .3s;
}
.toast.show     { opacity: 1 !important; transform: translateX(-50%) translateY(0); }
.toast--error   { background: var(--red);    color: #fff; }
.toast--success { background: var(--forest); color: var(--cream); }

/* ── Form generici (auth + modali) ────────────────────────── */
.form-group { margin-bottom: 1.2rem; }
.form-group label {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--text-muted); margin-bottom: .4rem;
  text-transform: uppercase; letter-spacing: .05em;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: .75rem 1rem;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-size: .95rem; font-family: var(--font-body);
  transition: border-color var(--transition);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { outline: none; border-color: var(--moss); }

/* ── Bottoni globali ───────────────────────────────────────── */
/* Base condivisa */
.btn-primary, .btn-confirm, .btn-cancel, .btn-danger-sm, .btn-nav, .btn-nav-ghost {
  cursor: pointer;
  font-family: var(--font-body);
  border-radius: var(--radius-sm);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

/* Primario pieno — submit / login */
.btn-primary {
  width: 100%; padding: .85rem;
  background: var(--forest); color: var(--cream);
  border: none; font-weight: 700; font-size: 1rem;
}
.btn-primary:hover    { background: var(--moss); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }

/* Conferma — azione positiva */
.btn-confirm {
  padding: .65rem 1.4rem;
  background: var(--accent); color: var(--cream);
  border: none; font-weight: 700;
}
.btn-confirm:hover { background: var(--moss); }

/* Annulla — azione neutra */
.btn-cancel {
  padding: .65rem 1.2rem;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border);
}
.btn-cancel:hover { border-color: var(--moss); color: var(--text); }

/* Distruttivo — elimina / rimuovi */
.btn-danger-sm {
  padding: .65rem 1.2rem;
  background: transparent; color: var(--red);
  border: 1px solid var(--red);
}
.btn-danger-sm:hover { background: rgba(166, 68, 68, 0.08); }

/* ── Responsive base ───────────────────────────────────────── */
@media (max-width: 600px) {
  .content-header-top { flex-direction: column; }
  .header-left { flex-direction: column; align-items: flex-start; }
}