/**
 * Quantilica Design System (QDS v2) — Base
 * Elementos nus (corpo, tabela, código, formulário). Só lê tokens semânticos.
 */

body {
    font-family: var(--q-font-ui);
    font-weight: var(--q-weight-regular);
    color: var(--q-color-text);
    background-color: var(--q-color-bg);
}

.form-control::placeholder,
.form-select::placeholder {
    color: var(--q-color-text-muted);
    opacity: 0.85;
}

thead th,
.table thead th,
.q-table th {
    background-color: var(--q-color-surface-sunken);
    color: var(--q-color-text-muted);
    font-weight: var(--q-weight-bold);
    font-size: var(--q-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--q-tracking-wide);
    border-bottom: 2px solid var(--q-color-brand);
}

td,
.table td,
.q-table td {
    font-variant-numeric: tabular-nums;
}

code:not(pre code) {
    background-color: var(--q-color-surface-sunken);
    color: var(--q-color-code-inline);
    border: 1px solid var(--q-color-border);
    padding: 0.15rem 0.4rem;
    border-radius: var(--q-radius-sm);
    font-family: var(--q-font-data);
    font-size: 0.85em;
    font-weight: var(--q-weight-regular);
}

pre {
    background-color: var(--q-color-code-bg);
    color: var(--q-color-code-text);
    border: 1px solid var(--q-color-border);
    border-radius: var(--q-radius-md);
    padding: var(--q-space-4) var(--q-space-5);
    font-family: var(--q-font-data);
    font-size: var(--q-text-sm);
}

pre code {
    background-color: transparent;
    color: inherit;
    border: none;
    padding: 0;
    font-family: inherit;
}

:is(a, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--q-color-focus);
    outline-offset: 2px;
}

/* ---------- Teal da gata nos detalhes ---------- */
:root {
    accent-color: var(--q-color-accent);        /* checkbox, rádio, range, progress nativos */
    scrollbar-color: var(--q-color-scrollbar) transparent;
}

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

input,
textarea,
[contenteditable] {
    caret-color: var(--q-color-accent);
}

a {
    text-decoration-color: var(--q-color-link-underline);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:hover {
    text-decoration-color: currentColor;
}

mark,
.mark {
    padding: 0 0.15em;
    background-color: var(--q-color-brand-soft);
    color: inherit;
    border-radius: var(--q-radius-sm);
}

ul > li::marker {
    color: var(--q-color-brand);
}

ol > li::marker {
    color: var(--q-color-brand-text);
    font-weight: var(--q-weight-bold);
}

details > summary::marker {
    color: var(--q-color-brand-text);
}

blockquote:not([class]) {
    padding-left: var(--q-space-4);
    border-left: 3px solid var(--q-color-brand);
}

:is(h1, h2, h3, h4, [id]):target {
    scroll-margin-top: 5rem;
    animation: q-alvo 1.6s ease-out;
}

@keyframes q-alvo {
    from { background-color: var(--q-color-brand-soft); }
    to { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    :is(h1, h2, h3, h4, [id]):target {
        animation: none;
    }
}