/* ==========================================================================
   Base — reset, tipografia, botões, campos, foco. Depende de tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
    min-height: 100vh;
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--text);
    background-color: var(--bg);
    font-feature-settings: "cv11", "ss01";
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--font-ui);
    line-height: var(--lh-tight);
    font-weight: 600;
    letter-spacing: -0.014em;
    color: var(--text);
}

a { color: var(--v-300); text-decoration: none; }
a:hover { color: var(--v-200); }
:root[data-theme="light"] a { color: var(--v-600); }
:root[data-theme="light"] a:hover { color: var(--v-700); }

img, svg { display: block; max-width: 100%; }
code, kbd, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

::selection { background: var(--sel); color: var(--text); }

/* Logo branco: no dark (padrão) fica branco; no light escurece. */
.brand-img { display: block; height: 26px; width: auto; max-width: 100%; filter: none; }
:root[data-theme="light"] .brand-img { filter: brightness(0); }

:focus { outline: none; }
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--v-a40);
    border-radius: var(--r-sm);
}

/* ---- Scrollbar fina ---- */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: var(--border-hot) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: transparent; border: 3px solid transparent; border-radius: var(--r-full); background-clip: content-box; }
*:hover::-webkit-scrollbar-thumb { background: var(--border-hot); background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-mute); background-clip: content-box; }

/* ---- Botões ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    height: 30px; padding: 0 var(--sp-3);
    font: inherit; font-size: var(--fs-base); font-weight: 500;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-md);
    cursor: pointer; white-space: nowrap;
    transition: background-color var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out),
                color var(--d-2) var(--e-out), transform var(--d-1) var(--e-out);
}
.btn:hover { background: var(--surface-3); border-color: var(--border-hot); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn svg { width: 15px; height: 15px; }

.btn--primary { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hi); border-color: transparent; }
.btn--primary:active { background: var(--accent-lo); }

.btn--ghost { height: 28px; background: transparent; border-color: transparent; color: var(--text-dim); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); border-color: transparent; }

.btn--danger { background: transparent; border-color: transparent; color: var(--err); }
.btn--danger:hover { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); border-color: transparent; }

.btn--block { width: 100%; }
.btn--sm { height: 26px; font-size: var(--fs-sm); padding: 0 var(--sp-2); }

.icon-btn {
    width: 28px; height: 28px; display: inline-grid; place-items: center; flex-shrink: 0;
    border-radius: var(--r-md); border: 1px solid transparent; background: transparent;
    color: var(--text-dim); cursor: pointer;
    transition: background-color var(--d-2) var(--e-out), color var(--d-2) var(--e-out);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn:active { transform: scale(.94); }

/* ---- Superfícies ---- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.glass {
    background: var(--glass);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid var(--border);
}

/* ---- Formulário ---- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field > label { font-size: var(--fs-xs); font-weight: 500; color: var(--text-dim); }
.field .hint { font-size: var(--fs-xs); color: var(--text-mute); line-height: 1.4; }

.input, .select, textarea.input {
    width: 100%; min-height: 30px; padding: 6px var(--sp-3);
    font: inherit; font-size: var(--fs-base); color: var(--text);
    background: var(--surface); border: 1px solid var(--border-hi); border-radius: var(--r-md);
    transition: border-color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
}
textarea.input { min-height: 64px; line-height: 1.5; resize: vertical; }
.input::placeholder { color: var(--text-mute); }
.input:focus, .select:focus, textarea.input:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--v-a20);
}
.input--color { padding: 3px; height: 30px; width: 48px; cursor: pointer; }

.field--error .input, .field--error .select { border-color: var(--err); }
.field--error .input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 24%, transparent); }
.field__error { font-size: var(--fs-xs); color: var(--err); animation: qs-shake var(--d-3) var(--e-out); }
@keyframes qs-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }

/* ---- Badge / chip ---- */
.badge, .chip {
    display: inline-flex; align-items: center; gap: var(--sp-1); height: 18px; padding: 0 6px;
    font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    border-radius: var(--r-sm); border: 0; color: var(--text-dim); background: var(--surface-2);
}
.badge svg, .chip svg { width: 12px; height: 12px; }
.badge--ok, .chip--ativo   { color: var(--ok);   background: color-mix(in srgb, var(--ok) 14%, transparent); }
.badge--fail, .chip--recusado { color: var(--err); background: color-mix(in srgb, var(--err) 14%, transparent); }
.chip--pendente { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.chip--status   { color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }

/* ---- Alerta ---- */
.alert {
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--border-hi);
    font-size: var(--fs-base); color: var(--text-dim); margin-bottom: var(--sp-5); background: var(--surface-2);
}
.alert--error { color: var(--err); border-color: color-mix(in srgb, var(--err) 34%, transparent); background: color-mix(in srgb, var(--err) 8%, transparent); }
.alert ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }

/* ---- Utilidades ---- */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.muted { color: var(--text-dim); }
.subtle { color: var(--text-mute); }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-4 { margin-top: var(--sp-4); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.p-5 { padding: var(--sp-5); }
.p-6 { padding: var(--sp-6); }
.gap-3 { gap: var(--sp-3); }
.flex-wrap { flex-wrap: wrap; }
.tabular { font-variant-numeric: tabular-nums; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }