/* ============================================================
   BeOurBest: token condivisi dei prototipi
   Embed da DESIGN.md (root repo): variante C "Petrolio" (PS9).
   DESIGN.md è la fonte: non modificare i valori qui senza
   allinearli lì (e ri-lintare).
   Condiviso dai 4 prototipi: servire la cartella prototype/
   (python3 -m http.server) → path ../shared/tokens.css
   ============================================================ */

:root {
  --font-sans: "Nunito Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Petrolio di brand: tinta costante ~190 gradi, letta dal file "Colori brand
     identity" consegnato da Davide col riscontro del 2026-08-26
     (docs/design/assets/colori-brand-identity-rev260824.pptx, fondo della
     cover: #4D7982 in cima, #273D41 in fondo). Il valore precedente #4E7E7B
     era dedotto dalla slide dei segni distintivi, non letto da una fonte del
     brand, e ruotava la tinta di 8 gradi lungo il gradiente: non era una
     scelta di design.
     --primary-strong e' riderivato sulla stessa linea di tinta (189,0 gradi),
     non solo scurito: scurirlo soltanto reintrodurrebbe la rotazione che
     stiamo togliendo.
     Font e fondi chiari NON seguono il sito: restano quelli qui sotto finche'
     non arriva il riscontro sul prototipo Rev 2.0 (DESIGN.md, Divergenze). */
  --primary: #4D7982;
  --primary-strong: #3B5D63;
  --on-primary: #FFFFFF;
  --petrol-grad-start: #4D7982;
  --petrol-grad-end: #273D41;
  --accent: #FFDE59;            /* fill; come testo solo grande e su fondo scuro */
  --secondary-lilla: #D5BEF4;        /* solo su fondo petrolio scuro */
  --secondary-lilla-strong: #6B4E8E; /* testo lilla su fondo chiaro (AA) */

  --surface: #F9F9F6;
  --elevated: #FFFFFF;
  --on-surface: #22292B;
  --muted: #5D6B70;
  --hairline: #E2E7E6;

  --success: #15803D;
  --success-bg: #EBF6EF;
  /* Arancione (SAL 12/08, fix round 2): #F2A65A e' il valore chiesto dal
     committente, letterale: decisione presa sopra la stima di contrasto
     (il fix round 1 aveva portato il token a #A55C09, verificato AA).
     DEBITO DI ACCESSIBILITA' ACCETTATO CONSAPEVOLMENTE, non un refuso:
     come testo 2,02:1 su bianco e 1,84:1 su --warning-bg (minimo AA 4,5:1);
     come fill (.switch--raw, .tl-dot, .sem-seg.attn) 2,02:1 contro il
     minimo 3:1 di WCAG 1.4.11. Vedi task-13-report.md (fix round 1 e 2). */
  --warning: #F2A65A;
  --warning-bg: #FBF3E8;
  --error: #B91C1C;
  --error-bg: #FAE8E6;
  --info: #0369A1;
  --info-bg: #E3F0F7;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --radius-card: var(--radius-lg);
  --radius-ctl: var(--radius-md);
  --radius-btn: var(--radius-full);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;

  --shadow-card: 0 1px 3px rgba(34, 41, 43, 0.05), 0 4px 14px rgba(34, 41, 43, 0.05);
}

/* Superficie brand scura (slide segni distintivi) */
.bg-petrol-grad {
  background: linear-gradient(180deg, var(--petrol-grad-start), var(--petrol-grad-end));
  color: #fff;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--surface);
  font-family: var(--font-sans);
  color: var(--on-surface);
}

/* ---- Atomi condivisi ---- */
.btn {
  display: block; width: 100%; text-align: center; font-family: var(--font-sans);
  font-size: 16px; font-weight: 700; padding: 15px; border: none; cursor: pointer;
  border-radius: var(--radius-btn); background: none; color: var(--on-surface);
}
.btn-primary {
  background: linear-gradient(180deg, var(--petrol-grad-start), var(--petrol-grad-end));
  color: var(--on-primary);
}
.btn-ghost { color: var(--primary-strong); }
.btn-inline { display: inline-block; width: auto; padding: 9px 18px; font-size: 14px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  border-radius: var(--radius-full); padding: 4px 10px;
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip.ok   { color: var(--success); background: var(--success-bg); }
.chip.attn { color: var(--warning); background: var(--warning-bg); }
.chip.off  { color: var(--error);   background: var(--error-bg); }
.chip.neutral { color: var(--muted); background: var(--surface); border: 1px solid var(--hairline); }

.banner-error {
  display: flex; align-items: center; gap: 10px;
  background: var(--error-bg); color: var(--error);
  border-radius: var(--radius-ctl); padding: 12px 14px;
  font-size: 14px; font-weight: 600;
}
.banner-info {
  display: flex; align-items: center; gap: 10px;
  background: var(--info-bg); color: var(--info);
  border-radius: var(--radius-ctl); padding: 12px 14px;
  font-size: 14px; font-weight: 600;
}

/* Error-state di caricamento pagina: messaggio centrato + retry sotto
   (feedback stakeholder 2026-07-23: mai banner rosso per i load-error;
   .banner-error resta SOLO per errori di form/submit inline). */
.center-fill { flex: 1; display: flex; align-items: center; justify-content: center; }
.error-state { text-align: center; padding: 40px 24px; }
.error-state .er-icon {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--error-bg); color: var(--error);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.error-state .er-title { font-size: 16px; font-weight: 800; color: var(--on-surface); margin-bottom: 4px; }
.error-state .er-sub { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin-bottom: 18px; }

.empty-state { text-align: center; padding: 40px 24px; color: var(--muted); }
.empty-state .es-icon { font-size: 34px; margin-bottom: 10px; }
.empty-state .es-title { font-size: 16px; font-weight: 700; color: var(--on-surface); margin-bottom: 4px; }
.empty-state .es-sub { font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; }

.skeleton {
  border-radius: var(--radius-ctl);
  background: linear-gradient(90deg, var(--hairline) 25%, #F0F1EE 50%, var(--hairline) 75%);
  background-size: 200% 100%;
  animation: proto-shimmer 1.4s infinite;
}
@keyframes proto-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.mono { font-family: var(--font-mono); }