/* ═══════════════════════════════════════════════════════
 * MKTvibe — Design Tokens
 * Paleta oficial da marca · Flat UI · Dark Mode
 * ═══════════════════════════════════════════════════════ */

:root {
  /* ── Marca ── */
  --pet:     #284b5d;   /* azul petróleo — primária */
  --mid:     #6497a2;   /* azul médio — acento secundário */
  --yel:     #e8c938;   /* amarelo queimado — destaque / CTA */
  --beg:     #cfcbb6;   /* bege — texto e superfícies suaves */

  /* ── Status ── */
  --red:     #c96060;   /* erro / crítico */
  --ora:     #c4893a;   /* atenção / warning */
  --grn:     #4a9e7a;   /* ok / sucesso */

  /* ── Fundos (dark mode) ── */
  --bg:      #0e1c24;   /* fundo principal */
  --bg2:     #152530;   /* topbar / nav */
  --surf:    #1e3040;   /* cards / superfícies */
  --surf2:   #243848;   /* hover / estados ativos */

  /* ── Texto ── */
  --txt:     #e8e4d8;   /* texto principal (bege claro) */
  --txt2:    #9ba8a0;   /* texto secundário */
  --txt3:    #5a6e6e;   /* texto muted */

  /* ── Bordas ── */
  --border:  rgba(100, 151, 162, 0.15);  /* borda sutil (mid com baixa opacidade) */
  --border-active: rgba(100, 151, 162, 0.35);

  /* ── Dimensões ── */
  --radius:    8px;
  --radius-sm: 6px;
  --radius-xs: 4px;

  /* ── Tipografia ── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ── Reset ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── Botão Primário ── */
.btn-primary {
  background: var(--pet);
  border: 1px solid var(--mid);
  color: var(--yel);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover {
  background: var(--surf2);
}

/* ── Botão Secundário ── */
.btn-secondary {
  background: none;
  border: 1px solid rgba(100, 151, 162, 0.3);
  color: var(--txt2);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-secondary:hover {
  border-color: var(--mid);
  color: var(--txt);
}

/* ── Card ── */
.card {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ── Badge ── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-green  { background: rgba(74, 158, 122, 0.15); color: var(--grn); }
.badge-red    { background: rgba(201, 96, 96, 0.15);  color: var(--red); }
.badge-orange { background: rgba(196, 137, 58, 0.15); color: var(--ora); }
.badge-blue   { background: rgba(100, 151, 162, 0.15); color: var(--mid); }
.badge-yellow { background: rgba(232, 201, 56, 0.12); color: var(--yel); }