/* =====================================================================
   SAZIO — Redesign "Salute moderna" (smeraldo + corallo)
   ---------------------------------------------------------------------
   Drop-in override. NON modifica style.css: va caricato SUBITO DOPO,
   così ridefinisce solo i design token e i pochi gradienti oro hardcoded.

   In index.html, dopo <link ... href="style.css">, aggiungi:
     <link rel="stylesheet" href="sazio-redesign.css">
   (e il link Google Fonts per Space Grotesk — vedi INSTALL.md)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------------
   1. LIGHT — palette, neutri, superfici, sfondo (CSS-only, niente marmo)
   --------------------------------------------------------------------- */
:root {
  /* Brand */
  --primary:        #059669;   /* smeraldo */
  --primary-light:  #10b981;
  --primary-dark:   #047857;
  --secondary:      #0f766e;   /* teal profondo */
  --accent:         #f4674c;   /* corallo — solo CTA/highlight */

  /* Semantici */
  --success:  #059669;
  --warning:  #e2a13a;
  --error:    #e23f2f;
  --info:     #0ea5a0;

  /* Neutri caldi/verdastri (stessa scala di luminosità, hue spostato) */
  --gray-50:  #f6f8f6;
  --gray-100: #eef2ef;
  --gray-200: #e3eae6;
  --gray-300: #cbd6d0;
  --gray-400: #94a39b;
  --gray-500: #5f6e66;
  --gray-600: #45544c;
  --gray-700: #2e3b34;
  --gray-800: #1b2620;
  --gray-900: #14201c;

  /* Gradienti */
  --gradient-primary: linear-gradient(150deg, #10b981 0%, #059669 55%, #047857 100%);
  --gradient-success: linear-gradient(150deg, #10b981 0%, #059669 100%);
  --gradient-warning: linear-gradient(150deg, #f0b45a 0%, #e2a13a 100%);
  --gradient-purple:  linear-gradient(150deg, #14b8a6 0%, #0f766e 100%); /* ri-mappato su teal */
  --gradient-danger:  linear-gradient(150deg, #f4674c 0%, #e14e33 100%);

  /* Accent oro → smeraldo (marcatori attivi, bordi, sidebar) */
  --gold:       #059669;
  --gold-soft:  rgba(5, 150, 105, 0.12);

  /* RGB per usi con alpha */
  --primary-rgb: 5, 150, 105;
  --success-rgb: 5, 150, 105;
  --warning-rgb: 226, 161, 58;
  --error-rgb:   226, 63, 47;
  --accent-rgb:  244, 103, 76;

  /* Ombre: più precise, meno diffuse */
  --shadow-color: rgba(20, 32, 28, 0.10);
  --shadow-sm: 0 1px 2px rgba(20,32,28,.05), 0 2px 6px -2px rgba(20,32,28,.08);
  --shadow-md: 0 1px 2px rgba(20,32,28,.04), 0 8px 20px -6px rgba(20,32,28,.10);
  --shadow-lg: 0 2px 4px rgba(20,32,28,.04), 0 16px 34px -12px rgba(20,32,28,.14);
  --shadow-xl: 0 4px 8px rgba(20,32,28,.05), 0 28px 56px -16px rgba(20,32,28,.18);
  --shadow-glow: 0 0 0 4px rgba(5, 150, 105, 0.12);

  /* Superfici: elevated pulite (glass più leggero, meno lattiginoso) */
  --glass-bg:        rgba(255, 255, 255, 0.86);
  --glass-bg-strong: rgba(255, 255, 255, 0.95);
  --glass-border:    rgba(255, 255, 255, 0.9);
  --glass-hairline:  rgba(20, 32, 28, 0.08);
  --glass-blur:      14px;
  --glass-shadow:    0 1px 2px rgba(20,32,28,.04), 0 12px 28px -10px rgba(20,32,28,.12);
  --glass-inset:     inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Sfondo app — solo CSS, funziona identico in stampa e offline */
  --app-bg:
    radial-gradient(900px 620px at 12% -12%, #eef6f0 0%, rgba(238,246,240,0) 58%),
    radial-gradient(760px 520px at 104% 0%, #e9f3ee 0%, rgba(233,243,238,0) 55%),
    linear-gradient(180deg, #f4f7f4 0%, #eef3ef 100%);
  --blob-1: rgba(5, 150, 105, 0.10);
  --blob-2: rgba(16, 185, 129, 0.08);
  --blob-3: rgba(244, 103, 76, 0.06);

  /* Tipografia */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;

  /* Transizioni: easing intenzionale */
  --transition-fast:   140ms cubic-bezier(0.2, 0, 0, 1);
  --transition-normal: 220ms cubic-bezier(0.2, 0, 0, 1);
  --transition-slow:   320ms cubic-bezier(0.2, 0, 0, 1);
}

/* ---------------------------------------------------------------------
   2. DARK — profonda ma stratificata, sfondo CSS-only
   --------------------------------------------------------------------- */
[data-theme="dark"] {
  --primary:        #10b981;
  --primary-light:  #34d399;
  --primary-dark:   #059669;
  --secondary:      #2dd4bf;
  --accent:         #fb7357;

  --gradient-primary: linear-gradient(150deg, #34d399 0%, #10b981 55%, #059669 100%);
  --gradient-purple:  linear-gradient(150deg, #2dd4bf 0%, #14b8a6 100%);
  --gradient-danger:  linear-gradient(150deg, #fb7357 0%, #ef5a3c 100%);

  --gold:       #10b981;
  --gold-soft:  rgba(16, 185, 129, 0.16);

  --primary-rgb: 16, 185, 129;

  /* Layer di superficie (profondità per colore, non per ombra) */
  --bg-primary:   #12211c;
  --bg-secondary: #0b1512;
  --bg-tertiary:  #182a24;
  --border-color: rgba(255, 255, 255, 0.08);
  --shadow-color: rgba(0, 0, 0, 0.5);

  --glass-bg:        rgba(18, 33, 28, 0.70);
  --glass-bg-strong: rgba(22, 38, 32, 0.86);
  --glass-border:    rgba(255, 255, 255, 0.08);
  --glass-hairline:  rgba(255, 255, 255, 0.08);
  --glass-shadow:    0 1px 2px rgba(0,0,0,.4), 0 16px 34px -12px rgba(0,0,0,.55);
  --glass-inset:     inset 0 1px 0 rgba(255, 255, 255, 0.05);

  --app-bg:
    radial-gradient(1000px 680px at 12% -14%, #14302a 0%, rgba(20,48,42,0) 55%),
    radial-gradient(820px 560px at 106% 4%, #10241f 0%, rgba(16,36,31,0) 55%),
    linear-gradient(180deg, #0c1714 0%, #081210 100%);
  --blob-1: rgba(16, 185, 129, 0.16);
  --blob-2: rgba(45, 212, 191, 0.12);
  --blob-3: rgba(251, 115, 87, 0.10);
}

/* ---------------------------------------------------------------------
   3. Override dei gradienti "oro" hardcoded nei componenti
   --------------------------------------------------------------------- */
.btn-primary,
[data-theme="dark"] .btn-primary,
.filter-btn.active,
[data-theme="dark"] .filter-btn.active,
.bottom-nav-fab,
[data-theme="dark"] .bottom-nav-fab {
  background: var(--gradient-primary) !important;
}

.welcome-card {
  background: linear-gradient(150deg, #0ba968 0%, #059669 52%, #047857 100%) !important;
}
[data-theme="dark"] .welcome-card {
  background: linear-gradient(150deg, #0f5f45 0%, #0b4a37 55%, #08382a 100%) !important;
}

.auth-gradient,
[data-theme="dark"] .auth-gradient {
  background: linear-gradient(150deg, #047857 0%, #059669 45%, #0f766e 100%) !important;
}

/* Corallo riservato agli inviti all'azione "aggiungi" (accent, con parsimonia) */
.btn-accent,
.add-to-diary-btn,
.result-add-btn,
.fab-add {
  background: var(--gradient-danger) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------------
   4. Tipografia — Space Grotesk su titoli e dati numerici
   --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.hero-value span,
.stat-value span,
.stat-number,
.weight-value,
.meal-calories-value,
.calorie-count,
.calories-value,
.date-navigation h2,
.result-calories,
.meal-calories,
.overview-stat .stat-number {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------
   5. Rifiniture: focus ring coerente + hover meno "lussuoso"
   --------------------------------------------------------------------- */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-input:focus,
.form-control:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18) !important;
}

.stat-card.primary,
.stat-card::before { }  /* i bordi/accenti oro ora ereditano --gold = smeraldo */