/* ============================================================
   BASE — reset leve + elementos globais
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* O atributo [hidden] sempre esconde, mesmo em elementos com display próprio
   (ex.: .btn usa display:inline-flex, que sobreporia o padrão do navegador). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 650;
  color: var(--c-text);
}

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; border: none; background: none; }

img, svg { display: block; max-width: 100%; }

ul { list-style: none; padding: 0; }

:focus-visible {
  outline: none;
  box-shadow: var(--sh-ring);
  border-radius: var(--r-sm);
}

/* Scrollbar discreta */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-text-mute) 45%, transparent);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--c-text-mute) 70%, transparent);
  background-clip: padding-box;
}

/* ---- Utilitários comuns ---------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.muted { color: var(--c-text-mute); }
.soft  { color: var(--c-text-soft); }

/* ---- Botões ---------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-weight: 600; font-size: 14px;
  background: var(--c-surface-2);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast), box-shadow var(--dur-fast),
              border-color var(--dur-fast);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--brand-accent);
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-accent) 35%, transparent);
}
.btn--primary:hover {
  background: color-mix(in srgb, var(--brand-accent) 90%, #000);
}
.btn--ink {
  background: var(--ink-900); color: #fff; border-color: transparent;
}
.btn--ink:hover { background: var(--ink-700); }
.btn--ghost { background: transparent; }
.btn--sm { padding: 7px 13px; font-size: 13px; }
.btn--icon { padding: 9px; border-radius: var(--r-md); }

.btn:disabled { opacity: .5; pointer-events: none; }

/* ---- Campos de formulário -------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  font-size: 12.5px; font-weight: 600; color: var(--c-text-soft);
  letter-spacing: .01em;
}
.input, .select, .textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  font-size: 14.5px;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand-accent);
  box-shadow: var(--sh-ring);
}
.textarea { resize: vertical; min-height: 84px; }

/* ---- Badges / pills -------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--c-surface-2); color: var(--c-text-soft);
}
.badge--accent {
  background: color-mix(in srgb, var(--brand-accent) 14%, transparent);
  color: var(--brand-accent-ink);
}
.badge--ok {
  background: color-mix(in srgb, var(--c-success) 16%, transparent);
  color: var(--c-success);
}
.badge--warn {
  background: color-mix(in srgb, var(--c-warning) 18%, transparent);
  color: var(--c-warning);
}
.badge--err {
  background: color-mix(in srgb, var(--c-danger) 16%, transparent);
  color: var(--c-danger);
}

/* ---- Cartão --------------------------------------------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}