/* Variaveis de cores para o tema claro */
:root[data-theme="light"] {
    --primary-color: #e8edf2;
    --secondary-color: #f4f6f8;
    --background-color: #f7f8f4;
    --surface-color: rgba(255, 255, 255, 0.92);
    --card-bg: #ffffff;
    --text-color: #0b2238;
    --accent-color: #825718;
    --accent-strong: #68410e;
    --accent-soft: rgba(168, 120, 47, 0.14);
    --signal-color: #1d7890;
    --signal-soft: rgba(29, 120, 144, 0.12);
    --muted-color: #617183;
    --success-color: #287a47;
    --warning-color: #a86a1b;
    --error-color: #bc3030;
    /* O fundo do resumo de erros (P1-08). Faixa cheia empurraria o olho
       para o aviso e para longe dos campos que ele manda corrigir. */
    --error-soft: rgba(188, 48, 48, 0.09);
    /* Texto que fica SOBRE a cor semântica preenchida. No tema claro as três
       cores são escuras, então o texto é branco. No escuro elas são claras e
       o par inverte — por isso isto é token, e não um `color` fixo no botão.
       Contraste medido sobre branco: sucesso 4.8:1, aviso 4.7:1, erro 5.9:1. */
    --on-success: #ffffff;
    --on-warning: #ffffff;
    --on-error: #ffffff;
    --message-success-bg: #e7f5ec;
    --message-success-border: #75b68d;
    --message-success-text: #135c32;
    --message-warning-bg: #fff4dc;
    --message-warning-border: #cd9a39;
    --message-warning-text: #6b4304;
    --message-error-bg: #fdeaea;
    --message-error-border: #d97171;
    --message-error-text: #8f1f1f;
    --message-info-bg: #e5f3f7;
    --message-info-border: #6eaaba;
    --message-info-text: #0b4b5a;
    --border-color: #d7d1c2;
    /* O par escuro reserva o dourado para destaque; aqui ele já é discreto,
       e o token existe para os dois temas fecharem o mesmo conjunto. */
    --border-accent: rgba(160, 122, 40, 0.5);
    --input-bg-color: #ffffff;
    --button-background: #0b2e4d;
    --button-hover: #a8782f;
    --button-hover-text: #07192b;
    --button-hover-background: #a8782f;
    --button-text-color: #ffffff;
    --modal-bg-color: #ffffff;
    --focus-ring: #146a80;
    --image-skeleton: linear-gradient(100deg, rgba(11, 34, 56, 0.08), rgba(168, 120, 47, 0.13), rgba(11, 34, 56, 0.08));
    --profile-vehicle-bg-opacity: 0.22;
    --profile-vehicle-bg-filter: blur(1.5px) saturate(0.9);
    --page-gradient:
        radial-gradient(circle at top left, rgba(29, 120, 144, 0.13), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(168, 120, 47, 0.13), transparent 30rem),
        linear-gradient(180deg, #fbfbf7 0%, #eef3f5 100%);

    --box-shadow: 0 18px 42px rgba(11, 34, 56, 0.12);
    /* Uma cor de sombra por tema alimenta os três degraus de --elevation-*
       da fundação. Sombra sobre fundo claro é azulada, não preta. */
    --shadow-color: rgba(11, 34, 56, 0.12);
}