/* Design system "SGM Enterprise Core" — token condivisi (da designMd Stitch).
   Riferimento visivo: progetto Stitch "SGM Lounge" (sola lettura). */
:root {
  /* Superfici */
  --surface: #faf9f7;
  --surface-muted: #f5f7f6;
  --surface-container-lowest: #ffffff;
  --surface-container: #eeeeec;
  --surface-container-high: #e9e8e6;

  /* Testo */
  --on-surface: #1a1c1b;
  --on-surface-variant: #414845;
  --outline: #727975;
  --border-subtle: #e0e4e2;

  /* Brand */
  --primary: #324f46;
  --primary-container: #4a675d;
  --on-primary: #ffffff;
  --on-primary-container: #c4e4d7;
  --secondary: #695c50;

  /* Stati */
  --success: #2d8a5b;
  --success-bg: #e5f4ee;
  --error: #d32f2f;
  --error-bg: #fdecea;
  --warning: #a15c00;
  --warning-bg: #fdf1dd;

  /* Forma / spazio / ombre */
  --radius-btn: 8px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --space: 8px;
  --gutter-mobile: 16px;
  --margin-mobile: 20px;
  --gutter-desktop: 24px;
  --margin-desktop: 32px;
  --sidebar-w: 260px;
  --tap: 48px;
  --elev-1: 0 2px 8px rgba(0, 0, 0, 0.04);
  --elev-2: 0 8px 24px rgba(0, 0, 0, 0.12);

  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; }
body {
  font-family: var(--font-sans);
  color: var(--on-surface);
  background: var(--surface-muted);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--primary); }

/* Marchio */
.brand { font-weight: 700; letter-spacing: .2px; display: inline-flex; align-items: baseline; gap: 6px; }
.brand-mark { color: var(--primary); font-weight: 800; }
.brand-sub { color: var(--on-surface-variant); font-weight: 600; }
.brand-link { text-decoration: none; }

/* Bottoni */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 18px; border-radius: var(--radius-btn);
  border: 1px solid transparent; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: filter .15s, background .15s;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover:not([disabled]):not([aria-disabled="true"]) { filter: brightness(1.08); }
.btn-secondary { background: var(--surface-container-lowest); border-color: var(--primary); color: var(--primary); }
.btn-ghost { background: transparent; border-color: var(--border-subtle); color: var(--on-surface); }
.btn-danger { background: var(--error); color: #fff; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--surface-container-high); color: var(--outline);
  border-color: transparent; cursor: not-allowed; filter: none;
}
.btn-block { width: 100%; }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 14px; }

/* Chip di stato (soft bg + testo forte) */
.pill { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; }
.pill-ok { background: var(--success-bg); color: var(--success); }
.pill-warn { background: var(--warning-bg); color: var(--warning); }
.pill-err { background: var(--error-bg); color: var(--error); }

/* Flash / banner */
.flash { padding: 12px 14px; border-radius: var(--radius-btn); margin-bottom: 16px; font-size: 14px; }
.flash-ok { background: var(--success-bg); color: var(--success); }
.flash-error { background: var(--error-bg); color: var(--error); }
.flash-warn { background: var(--warning-bg); color: var(--warning); }

/* Form */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--on-surface-variant); }
.field > input, .field > select, .field > textarea {
  font: 400 16px/1.4 var(--font-sans); text-transform: none; letter-spacing: normal;
  color: var(--on-surface); padding: 12px; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-btn); background: var(--surface-container-lowest); width: 100%;
}
.field > input:focus, .field > select:focus, .field > textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(50, 79, 70, 0.25);
}
.field.invalid > input { border-color: var(--error); background: var(--error-bg); }
.field-hint { font: 400 13px/1.4 var(--font-sans); text-transform: none; letter-spacing: normal; color: var(--on-surface-variant); }
.field-hint.is-error { color: var(--error); }

/* Card */
.card {
  background: var(--surface-container-lowest); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); padding: 16px; box-shadow: var(--elev-1);
}

.muted { color: var(--on-surface-variant); }
.mono { font-family: var(--font-mono); }
.empty { color: var(--on-surface-variant); text-align: center; padding: 32px 0; }
.screen-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 4px 0 16px; }