/* ============================================================================
   W.B.Child — Design System  (tema "Comunità": professionale + accogliente)
   Verde-pino = sistema (link, focus, azioni) · Ambra = brand (tessera, VGEM).
   Superfici bianche su fondo chiaro. Titoli Sora, testo Inter.
   Token e classi base riutilizzabili anche per la futura app.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&display=swap');

:root {
  /* superfici */
  --wbc-bg:        #f4f6f5;
  --wbc-surface:   #ffffff;
  --wbc-surface-2: #eef2f0;
  --wbc-ink:       #16241d;
  --wbc-muted:     #5c6b64;
  --wbc-border:    #e4e9e6;

  /* primario — verde pino / emerald */
  --wbc-primary:      #0e7b5f;
  --wbc-primary-600:  #0b6a51;
  --wbc-primary-700:  #095340;
  --wbc-primary-050:  #e7f4ef;
  --wbc-primary-100:  #cbe8dd;

  /* accento — ambra (brand / VGEM) */
  --wbc-accent:      #e8963a;
  --wbc-accent-600:  #cf7f26;
  --wbc-accent-700:  #a86219;
  --wbc-accent-050:  #fdf2e3;
  --wbc-accent-100:  #f8e1c2;

  /* raggi */
  --wbc-radius-sm: 10px;
  --wbc-radius:    16px;
  --wbc-radius-lg: 22px;

  /* ombre morbide, tinte d'inchiostro */
  --wbc-shadow-sm: 0 1px 2px rgba(16,36,29,.06), 0 1px 3px rgba(16,36,29,.05);
  --wbc-shadow-md: 0 8px 24px -10px rgba(16,36,29,.20);
  --wbc-shadow-lg: 0 20px 48px -18px rgba(16,36,29,.30);

  /* gradienti firma */
  --wbc-grad-primary: linear-gradient(135deg, #0f8a68 0%, #0e7b5f 100%);
  --wbc-grad-brand:   linear-gradient(135deg, #f0ab4c 0%, #e8963a 100%);

  --wbc-font-heading: "Sora", system-ui, sans-serif;
  --wbc-font-body:    "Inter", system-ui, sans-serif;
}

/* ── Classi base (per nuove schermate / app) ─────────────────────────────── */
.wbc-card {
  background: var(--wbc-surface); border: 1px solid var(--wbc-border);
  border-radius: var(--wbc-radius-lg); box-shadow: var(--wbc-shadow-sm);
  padding: 22px;
}
.wbc-kicker { font: 700 11px/1 var(--wbc-font-heading); letter-spacing:.14em; text-transform:uppercase; color: var(--wbc-primary); }
.wbc-title  { font: 700 1.15rem/1.15 var(--wbc-font-heading); color: var(--wbc-ink); letter-spacing:-.01em; }

.wbc-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font: 600 .9rem/1 var(--wbc-font-heading); cursor:pointer; text-decoration:none;
  padding: 11px 18px; border-radius: 12px; border:1px solid transparent;
  transition: background .15s ease, transform .05s ease;
}
.wbc-btn:active { transform: translateY(1px); }
.wbc-btn-primary { background: var(--wbc-primary); color:#fff; }
.wbc-btn-primary:hover { background: var(--wbc-primary-600); }
.wbc-btn-brand   { background: var(--wbc-grad-brand); color:#241606; }
.wbc-btn-brand:hover { filter:saturate(1.05) brightness(.98); }
.wbc-btn-outline { background: var(--wbc-surface); border-color: var(--wbc-border); color: var(--wbc-ink); }
.wbc-btn-outline:hover { background: var(--wbc-surface-2); }

.wbc-chip {
  display:inline-flex; align-items:center; gap:6px; font:600 .78rem/1 var(--wbc-font-body);
  padding:5px 12px; border-radius:999px; background: var(--wbc-primary-050); color: var(--wbc-primary-700);
}
.wbc-chip-brand   { background: var(--wbc-accent-050); color: var(--wbc-accent-700); }
.wbc-chip-outline { background: transparent; border:1px solid var(--wbc-border); color: var(--wbc-muted); }

.wbc-input {
  width:100%; padding:11px 14px; font: inherit; color: var(--wbc-ink);
  background: var(--wbc-surface); border:1px solid var(--wbc-border); border-radius:12px;
}
.wbc-input:focus-visible { outline:none; border-color: var(--wbc-primary); box-shadow:0 0 0 3px var(--wbc-primary-050); }