/*
|--------------------------------------------------------------------------
| Fundamentos — base tipográfica e comportamento global
|--------------------------------------------------------------------------
|
| Tudo aqui vale só dentro de .ds (a raiz das telas migradas).
| Telas antigas continuam com o visual do tema até serem migradas.
|
*/

.ds {
    color: var(--ds-color-text);

    font: var(--ds-text-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ds *,
.ds *::before,
.ds *::after {
    box-sizing: border-box;
}

/*
 * Regras de base com :where() = especificidade mínima.
 * Qualquer componente sobrescreve sem precisar de !important.
 */
.ds :where(h1, h2, h3, h4, h5, h6, p, ol, ul, dl, figure) {
    margin: 0;
}

.ds :where(h1, h2, h3, h4, h5, h6) {
    color: var(--ds-color-text);

    font: inherit;
}

/*
 * Seleção de texto no sistema inteiro (inclusive menu e breadcrumb, fora
 * de .ds): substitui o ciano do tema Dashly, que deixava o texto branco.
 * Cor e fundo sempre juntos — nunca herdar um dos dois.
 */
::selection {
    background: var(--ds-color-selection-bg);
    color: var(--ds-color-selection-text);
}

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

/* Links */

.ds :where(a, .ds-link) {
    color: var(--ds-color-text-link);
    text-decoration: none;
    text-underline-offset: 2px;
}

.ds :where(a, .ds-link):hover {
    color: var(--ds-color-text-link-hover);
    text-decoration: underline;
}

/* Foco visível só no teclado */

.ds :where(:focus) {
    outline: none;
}

.ds :where(:focus-visible) {
    outline: var(--ds-focus-outline);
    outline-offset: var(--ds-focus-offset);
}

/*
|--------------------------------------------------------------------------
| Escala tipográfica
|--------------------------------------------------------------------------
*/

.ds-display {
    font: var(--ds-text-display);
    letter-spacing: var(--ds-text-display-tracking);
}

.ds-page-title {
    font: var(--ds-text-page-title);
    letter-spacing: var(--ds-text-page-title-tracking);
}

.ds-section-title {
    font: var(--ds-text-section-title);
    letter-spacing: var(--ds-text-section-title-tracking);
}

.ds-heading {
    font: var(--ds-text-heading);
}

.ds-body {
    font: var(--ds-text-body);
}

.ds-body-sm {
    font: var(--ds-text-body-sm);
}

.ds-label-text {
    font: var(--ds-text-label);
}

.ds-caption {
    font: var(--ds-text-caption);
}

.ds-text-secondary {
    color: var(--ds-color-text-secondary);
}

.ds-text-muted {
    color: var(--ds-color-text-muted);
}

/* Números em coluna: dígitos de mesma largura */
.ds-num {
    font-variant-numeric: tabular-nums;
}

/* Texto longo: nunca passar de ~72 caracteres por linha */
.ds-prose {
    max-width: 72ch;
}

/* Só para leitores de tela */
.ds-sr-only {
    position: absolute !important;

    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;

    overflow: hidden;
    clip: rect(0 0 0 0);

    border: 0;

    white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Ícones (Phosphor, biblioteca oficial)
|--------------------------------------------------------------------------
|
| Tamanhos: 16 (dentro de texto e botões sm), 18 (botões md, menus),
| 20 (ícones soltos, cabeçalhos), 24 (estados vazios, destaques).
| Ícone decorativo leva aria-hidden="true".
|
*/

.ds :where(.ph) {
    line-height: 1;
    vertical-align: -0.125em;
}

.ds-icon-16 { font-size: 16px; }
.ds-icon-18 { font-size: 18px; }
.ds-icon-20 { font-size: 20px; }
.ds-icon-24 { font-size: 24px; }
.ds-icon-32 { font-size: 32px; }

/* Animações compartilhadas */
@keyframes ds-girar {
    to {
        transform: rotate(360deg);
    }
}