/**
 * Tokens.
 *
 * Cromia: a interface é INTEIRAMENTE acromática. Em editor gráfico, qualquer cor
 * no chrome compete com a arte na tela — a única coisa saturada deve ser o desenho.
 *
 * Duas cores funcionais escapam dessa regra, cada uma com um trabalho distinto:
 *   --accent  (âmbar)  = "você está aqui" na interface (ferramenta ativa, foco)
 *   --marker  (ciano)  = "isto é sua seleção" no canvas
 * Cores nunca são usadas por decoração.
 */

:root {
    /* Superfícies, do fundo do palco ao painel mais alto */
    --surface-stage: #0c0c0d;
    --surface-shell: #161618;
    --surface-panel: #1d1d20;
    --surface-raised: #26262a;
    --surface-sunken: #131315;

    --line: #303036;
    --line-strong: #45454d;

    --ink: #ededf0;
    --ink-muted: #9a9aa3;
    --ink-faint: #6b6b73;

    --accent: #e0a33c;
    --accent-ink: #17140d;
    --marker: #24c8e8;
    --danger: #e06060;

    /* Tipografia — pilha do sistema: zero requisição externa, zero CDN */
    --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

    --text-xs: 0.6875rem;
    --text-sm: 0.75rem;
    --text-md: 0.8125rem;
    --text-lg: 0.9375rem;

    /* Espaçamento em rem: escala com a preferência de fonte do usuário */
    --gap-1: 0.25rem;
    --gap-2: 0.5rem;
    --gap-3: 0.75rem;
    --gap-4: 1rem;
    --gap-5: 1.5rem;

    --rail-width: 2.75rem;
    --panel-width: 17rem;
    --header-height: 2.5rem;
    --ruler-size: 1.25rem;
    --status-height: 1.75rem;

    --control-height: 1.75rem;
    --focus-ring: 0 0 0 2px var(--accent);

    /* Sem raio e sem sombra: precisão visual condiz com ferramenta de vetor */
    --radius: 0;
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        --transition: 120ms ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition: 0ms;
    }
}