/* Variaveis de cores para o tema escuro */
:root[data-theme="dark"] {
    --primary-color: rgba(7, 25, 43, 0.9);
    --secondary-color: #101c2d;
    --background-color: #05080d;
    /* A superfície precisa se separar do fundo da página (#05080d). A 90% de
       opacidade sobre ele, o card ficava quase da cor da página. */
    --surface-color: #0c1c2f;
    --card-bg: #0e2238;
    --text-color: #e6ecef;
    --accent-color: #d0a85c;
    --accent-strong: #f1c979;
    --accent-soft: rgba(208, 168, 92, 0.16);
    --signal-color: #5eb9c8;
    --signal-soft: rgba(94, 185, 200, 0.13);
    --muted-color: #a3b0ba;
    --success-color: #70d184;
    --warning-color: #e1b95f;
    --error-color: #ff7d74;
    --error-soft: rgba(255, 125, 116, 0.12);
    /* O par de --on-* do tema claro, invertido: aqui as três cores semânticas
       são claras, então o texto sobre elas é escuro — e escuro *da própria
       família*, não preto puro, para o preenchimento não parecer sujo.
       Contraste medido: sucesso 9.5:1, aviso 9.3:1, erro 6.7:1. */
    --on-success: #04220e;
    --on-warning: #2a1f00;
    --on-error: #3a0d09;
    --message-success-bg: #133c28;
    --message-success-border: #3d945a;
    --message-success-text: #b7f6c9;
    --message-warning-bg: #44351a;
    --message-warning-border: #bb8c30;
    --message-warning-text: #ffe29a;
    --message-error-bg: #4b2024;
    --message-error-border: #d76c67;
    --message-error-text: #ffc0bb;
    --message-info-bg: #143947;
    --message-info-border: #4d9baa;
    --message-info-text: #b9edf4;
    --button-text-color: #ffffff;
    --button-background: #0f5786;
    --button-hover-background: #d0a85c;
    /* Borda neutra, e o dourado reservado para o que é destaque.

       `--border-color` é o token de contorno de **tudo**: card, campo, chip,
       tabela, diálogo. Em dourado a 38%, cada caixa da tela pedia atenção com
       a mesma cor da marca, e nenhuma conseguia. Neutro, o contorno separa; o
       dourado volta a significar alguma coisa quando aparece. */
    --border-color: rgba(150, 178, 208, 0.2);
    --border-accent: rgba(208, 168, 92, 0.45);
    --input-bg-color: #101c2d;
    --button-hover: #d0a85c;
    --button-hover-text: #07192b;
    --modal-bg-color: #0c1c2f;
    --focus-ring: #7fd0dd;
    --image-skeleton: linear-gradient(100deg, rgba(255, 255, 255, 0.05), rgba(208, 168, 92, 0.14), rgba(94, 185, 200, 0.07));
    --profile-vehicle-bg-opacity: 0.32;
    --profile-vehicle-bg-filter: blur(1.5px) saturate(0.92);
    --page-gradient:
        radial-gradient(circle at top left, rgba(94, 185, 200, 0.16), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(208, 168, 92, 0.13), transparent 30rem),
        linear-gradient(180deg, #05080d 0%, #0a1724 100%);

    --box-shadow: 0 22px 54px rgba(0, 0, 0, 0.38);
    /* Alimenta os três degraus de --elevation-* da fundação. No escuro a
       sombra é preta e mais densa: ela precisa vencer um fundo quase preto. */
    --shadow-color: rgba(0, 0, 0, 0.38);
}