/*
 * Tokens de cor do design system.
 * Fonte: docs/knowledge-base/design-system/spec.md, seção 1.
 *
 * Aplicados via atributo `data-theme` no elemento raiz (<html>), setado exclusivamente por
 * `Cortefy.Web.Theme.ThemeService` (via JS interop em js/theme.js) — nenhum outro ponto do
 * código deve ler/escrever esse atributo ou o localStorage do tema diretamente.
 *
 * - data-theme="light"           -> tema claro forçado (seção 1.1).
 * - data-theme="dark"            -> tema escuro forçado (seção 1.2).
 * - data-theme="auto" (ou        -> segue a preferência do sistema operacional
 *   ausência do atributo,           (`prefers-color-scheme`). "auto" é o valor padrão
 *   antes do primeiro paint)        quando o usuário nunca escolheu manualmente.
 *
 * Regra dura da spec: nenhuma tela usa cor fixa fora destes tokens.
 */

:root,
:root[data-theme='light'] {
    --bg: #F7F9FD;
    --bg-subtle: #EAEFFA;
    --text: #0A1024;
    --text-muted: #4A5678;
    --border: #D5DCF0;
    --primary: #2F5BF0;
    --primary-hover: #2347CC;
    --primary-subtle: #E4EAFF;
    --success: #12865A;
    --danger: #D12D30;
    --warning: #B86E00;
    --accent: #E5383B;
    color-scheme: light;
}

:root[data-theme='dark'] {
    --bg: #0A1024;
    --bg-subtle: #0F1834;
    --text: #F1F4FB;
    --text-muted: #9AA6CC;
    --border: #243058;
    --primary: #3D6BFF;
    --primary-hover: #5A82FF;
    --primary-subtle: #16224A;
    --success: #3DDC97;
    --danger: #FF7A7A;
    --warning: #FFC24B;
    --accent: #FF5A5D;
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme='auto'],
    :root:not([data-theme]) {
        --bg: #0A1024;
        --bg-subtle: #0F1834;
        --text: #F1F4FB;
        --text-muted: #9AA6CC;
        --border: #243058;
        --primary: #3D6BFF;
        --primary-hover: #5A82FF;
        --primary-subtle: #16224A;
        --success: #3DDC97;
        --danger: #FF7A7A;
        --warning: #FFC24B;
        --accent: #FF5A5D;
        color-scheme: dark;
    }
}

/*
 * Tokens de forma e profundidade do app interno (admin/cliente) — derivados do design system, não
 * substituem nenhum token de cor. `--accent` é o vermelho do poste de barbeiro (mesmo da plataforma):
 * reservado a "novo"/"agora" (agendamento novo, linha do horário atual) — nunca ação primária.
 */
:root {
    --radius-s: 10px;
    --radius-m: 16px;
    --radius-l: 24px;
    --shadow-1: 0 1px 2px rgba(10, 16, 36, 0.06), 0 4px 14px rgba(10, 16, 36, 0.06);
    --shadow-2: 0 10px 30px rgba(10, 16, 36, 0.16);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}