/* Tokens e base do painel. Verde e quase-preto da identidade da X-One. */
:root {
  --marca: #26D826;
  --marca-escura: #1FBF1F;
  --marca-texto: #128A12;
  --fundo: #F6F6F4;
  --superficie: #FFFFFF;
  --superficie-2: #EFEFEC;
  --texto: #121212;
  --texto-2: #5C5C5A;
  --texto-3: #8A8A87;
  --borda: rgba(0, 0, 0, 0.09);
  --perigo: #D92D20;
  --ok: #12805C;
  --sombra: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  --raio: 14px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-titulo: "Barlow Condensed", "Inter", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0E0E0E;
    --superficie: #181818;
    --superficie-2: #222222;
    --texto: #F2F2F0;
    --texto-2: #A8A8A4;
    --texto-3: #737370;
    --borda: rgba(255, 255, 255, 0.1);
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.5 var(--fonte);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.15; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.marca { font: 800 22px/1 var(--fonte-titulo); letter-spacing: .04em; text-transform: uppercase; }
.marca-x { color: var(--marca); }
.marca small { font: 600 11px/1 var(--fonte); letter-spacing: .12em; color: var(--texto-3); margin-left: 6px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--borda); border-radius: 999px;
  background: var(--superficie); color: var(--texto);
  font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, border-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn-primario { background: var(--marca); border-color: transparent; color: #000; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { border-color: rgba(127,127,127,.35); }
  .btn-primario:hover { background: var(--marca-escura); }
}
.btn-perigo { color: var(--perigo); }
.btn-pequeno { min-height: 34px; padding: 0 12px; font-size: 14px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--superficie);
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--texto); color: var(--fundo); border-color: transparent; }
.ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}