:root {
    /* Sinaliza pro navegador que a página já trata os dois temas sozinha — sem isso, campos
       nativos (select, date picker, anel de foco, scrollbar) podem renderizar com o esquema
       do SO/navegador por conta própria, descasado da nossa paleta (ou, em navegadores com
       "tema escuro forçado" pra sites sem suporte declarado, o navegador tenta inverter
       cores sozinho por cima do que já é escuro por nós, dando um resultado inconsistente). */
    color-scheme: light;

    /* Fundos */
    --c-bg:            #F0F2F5;
    --c-surface:       #FFFFFF;
    --c-surface-alt:   #F8F9FA;
    --c-border:        #DDDFE2;
    --c-border-strong: #CCD0D5;

    /* Texto */
    --c-text-primary:   #1C1E21;
    --c-text-secondary: #495057;
    --c-text-muted:     #9AA3B5;

    /* Accent (identidade visual herdada da v1) */
    --c-accent:       #1877F2;
    --c-accent-light: #E7F0FE;
    --c-accent-dark:  #166FE5;

    /* Semânticas */
    --c-success:       #198754;   --c-success-light: #E8F5E9;   --c-success-dark: #157347;
    --c-danger:        #DC3545;   --c-danger-light:  #F8D7DA;   --c-danger-dark:  #bb2d3b;
    --c-warning:       #FD7E14;   --c-warning-light: #FFF3E0;   --c-warning-dark: #d96a0d;
    --c-info:          #5DADE2;   --c-info-light:    #E3F2FD;   --c-info-dark:    #4A9BD1;
    --c-purple:        #6F42C1;   --c-purple-light:  #F0EBFA;   --c-purple-dark: #5A32A3;
    --c-terracotta:      #B5654A;   --c-terracotta-dark: #9A5240;

    /* Cores de status dos itens de pedido (status_itens) — identidade central do sistema */
    --c-status-pendente:      #FFC107;
    --c-status-confirmado:    #A569BD;
    --c-status-despachado:    #5DADE2;
    --c-status-chegou:        #52BE80;
    --c-status-concluido:     #99A3A4;
    --c-status-bo:            #E74C3C;
    --c-status-transferencia: #5DADE2;

    /* Sidebar (mesma cor do cabeçalho escuro da v1) */
    --c-sidebar-bg:        #343A40;
    --c-sidebar-bg-hover:  #495057;
    --c-sidebar-text:      #C8CDD8;
    --c-sidebar-active:    #1877F2;

    /* Espaçamentos */
    --space-xs: 4px;   --space-sm: 8px;   --space-md: 16px;
    --space-lg: 24px;  --space-xl: 32px;  --space-2xl: 48px;

    /* Raios */
    --radius-sm: 6px;  --radius-md: 10px;  --radius-lg: 16px;

    /* Sombras */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,.12);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.16);

    /* Outros */
    --transition: 180ms ease;
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 64px;
    --topbar-height: 60px;
}

/* Tema escuro — alternado via #btn-theme-toggle (topbar, app.js), persistido em
   localStorage (`tema`) e aplicado cedo (fora do bootstrap que espera autenticação, mesmo
   motivo do sidebar_colapsada — ver claude.md > Sidebar recolhível) pra não "piscar" claro
   antes de aplicar. Mesma identidade visual (accent azul da v1), só reequilibrada pra
   contraste em fundo escuro — nunca trocar a família de matiz de --c-accent/--c-status-*. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --c-bg:            #14171A;
    --c-surface:       #1E2226;
    --c-surface-alt:   #262B30;
    --c-border:        #33383D;
    /* Mais clara que um simples "passo acima" de --c-border: com o fundo do modal/card
       corrigido pra --c-surface (ver claude.md > Tema escuro — modais), a borda de campo
       precisava se destacar sozinha (sem depender de branco de fábrica do jQuery UI por
       trás) — #454B52 ficava fraca demais contra #1E2226, quase some. */
    --c-border-strong: #5A636C;

    --c-text-primary:   #E8EAED;
    --c-text-secondary: #B0B7BF;
    --c-text-muted:     #6B7280;

    --c-accent:       #4E9BFF;
    --c-accent-light: #1B3A61;
    --c-accent-dark:  #3B82F6;

    --c-success:       #4CAF6D;   --c-success-light: #16321F;   --c-success-dark: #3D9058;
    --c-danger:        #F1685C;   --c-danger-light:  #3B1B1D;   --c-danger-dark:  #D9483C;
    --c-warning:       #FFA94D;   --c-warning-light: #3D2C12;   --c-warning-dark: #E0932F;
    --c-info:          #74C0FC;   --c-info-light:    #16283A;   --c-info-dark:    #5BA8E8;
    --c-purple:        #9775E0;   --c-purple-light:  #2A2140;   --c-purple-dark: #7C5CC4;
    /* Precisa ficar claramente diferente de --c-danger (os botões "Cancelar"/"Excluir" ficam
       lado a lado no rodapé de todo dialog) — a 1ª tentativa (#D98F72) tinha ido rosada
       demais e quase se confundia com o vermelho de excluir num fundo escuro. Puxado de
       volta pra um marrom/terroso mais nítido, mesmo distanciamento de matiz que já existia
       no claro (#B5654A é marrom, #DC3545 é vermelho puro — bem separados). */
    --c-terracotta:    #C08A5E;   --c-terracotta-dark: #A06E45;

    --c-status-pendente:      #FFCA45;
    --c-status-confirmado:    #B983D6;
    --c-status-despachado:    #74C0FC;
    --c-status-chegou:        #6FDB9A;
    --c-status-concluido:     #8B959B;
    --c-status-bo:            #F0736A;
    --c-status-transferencia: #74C0FC;

    --c-sidebar-bg:        #0D0F11;
    --c-sidebar-bg-hover:  #1C2024;
    --c-sidebar-text:      #A9B2BD;
    --c-sidebar-active:    #4E9BFF;

    --shadow-sm: 0 1px 3px rgba(0,0,0,.35);
    --shadow-md: 0 4px 12px rgba(0,0,0,.45);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.55);
}