/*
  Super8 — Design System
  Fonte unica de verdade para cor, espacamento, tipografia, raio e sombra.
  Todo o resto do projeto (totens, admin) deve consumir estes tokens em vez
  de declarar cores/estilos soltos.
*/

@font-face {
  font-family: 'InterVariable';
  src: url('/fonts/inter/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- cor ---- */
  --s8-bg: #f6f5ef;           /* fundo off-white */
  --s8-surface: #ffffff;       /* branco puro (cards) */
  --s8-border: #e7e3d5;
  --s8-border-strong: #d8d2bd;

  --s8-olive-50: #f1f3e6;
  --s8-olive-100: #dfe4c4;
  --s8-olive-300: #97a664;
  --s8-olive-500: #5b6b34;     /* verde oliva — cor principal da marca */
  --s8-olive-600: #4a5829;
  --s8-olive-700: #3a4520;

  --s8-text: #23261c;
  --s8-text-muted: #6f7566;
  --s8-text-faint: #9aa08c;

  --s8-success-bg: #eef3e4;
  --s8-success: #4a5829;
  --s8-danger-bg: #fbeee0;
  --s8-danger: #a15a1f;
  --s8-danger-strong: #8a3f12;
  --s8-warn-bg: #fdf3df;
  --s8-warn: #92660f;

  /* ---- espacamento (escala 4px) ---- */
  --s8-space-1: 4px;
  --s8-space-2: 8px;
  --s8-space-3: 12px;
  --s8-space-4: 16px;
  --s8-space-5: 24px;
  --s8-space-6: 32px;
  --s8-space-7: 48px;
  --s8-space-8: 64px;

  /* ---- raio ---- */
  --s8-radius-sm: 10px;
  --s8-radius-md: 16px;
  --s8-radius-lg: 24px;
  --s8-radius-pill: 999px;

  /* ---- sombra (sempre leve/discreta, nunca dura) ---- */
  --s8-shadow-sm: 0 1px 2px rgba(35, 38, 28, 0.04), 0 2px 8px rgba(35, 38, 28, 0.05);
  --s8-shadow-md: 0 4px 16px rgba(35, 38, 28, 0.06), 0 12px 32px rgba(35, 38, 28, 0.07);
  --s8-shadow-lg: 0 12px 32px rgba(35, 38, 28, 0.08), 0 24px 60px rgba(35, 38, 28, 0.10);

  /* ---- tipografia ---- */
  --s8-font: 'InterVariable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

.s8-reset {
  margin: 0;
  font-family: var(--s8-font);
  color: var(--s8-text);
  background: var(--s8-bg);
  -webkit-font-smoothing: antialiased;
}

/* ---- componentes base ---- */

.s8-card {
  background: var(--s8-surface);
  border: 1px solid var(--s8-border);
  border-radius: var(--s8-radius-lg);
  box-shadow: var(--s8-shadow-md);
}

.s8-btn {
  appearance: none;
  border: none;
  border-radius: var(--s8-radius-md);
  font-family: var(--s8-font);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.06s ease, opacity 0.15s ease;
}

.s8-btn:active { transform: scale(0.98); }
.s8-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.s8-btn-primary {
  background: var(--s8-olive-500);
  color: #fff;
}

.s8-btn-secondary {
  background: var(--s8-olive-50);
  color: var(--s8-olive-700);
}

.s8-btn-ghost {
  background: transparent;
  color: var(--s8-text);
  border: 1px solid var(--s8-border-strong);
}

.s8-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s8-space-1);
  padding: var(--s8-space-1) var(--s8-space-3);
  border-radius: var(--s8-radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
}

.s8-badge-success { background: var(--s8-success-bg); color: var(--s8-success); }
.s8-badge-danger { background: var(--s8-danger-bg); color: var(--s8-danger-strong); }
.s8-badge-neutral { background: var(--s8-olive-50); color: var(--s8-olive-700); }

/* ---- icones simples (inline SVG, sem biblioteca externa) ---- */
.s8-icon { display: inline-block; vertical-align: middle; line-height: 0; }
.s8-icon svg { display: block; width: 100%; height: 100%; }