/* Identidade dos controles da Viral. As ações antigas ainda usam utilitários
   azuis em algumas telas. O seletor mantém essas ações alinhadas à marca;
   o componente principal usa a classe semântica própria. Fora de @layer
   para os estados hover/dark dos utilitários não reporem azul. */
.viral-button-primary,
:is(button, a, [role='button'], input[type='submit']):is(.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-indigo-600) {
    background-color: #f5c518;
    border-color: #f5c518;
    color: #111111;
}

.viral-button-primary:not(:disabled):not([aria-disabled='true']):hover,
:is(button, a, [role='button'], input[type='submit']):is(.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-indigo-600):not(:disabled):not([aria-disabled='true']):hover {
    background-color: #f0c000;
    border-color: #f0c000;
    color: #111111;
}

.viral-button-primary:not(:disabled):active,
:is(button, a, [role='button'], input[type='submit']):is(.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-indigo-600):not(:disabled):active {
    background-color: #d4a600;
    border-color: #d4a600;
    color: #111111;
}

:is(button, a, [role='button']):is(.text-blue-600, .text-blue-700):not(.bg-blue-500, .bg-blue-600, .bg-blue-700) {
    color: #111111;
    border-color: #d4a600;
}

:is(button, a, [role='button']):is(.bg-blue-50, .bg-blue-100) {
    background-color: #fffbeb;
    color: #111111;
}

.dark :is(button, a, [role='button']):is(.text-blue-600, .text-blue-700):not(.bg-blue-500, .bg-blue-600, .bg-blue-700) {
    color: #f5c518;
    border-color: #f5c518;
}

.dark :is(button, a, [role='button']):is(.bg-blue-50, .bg-blue-100) {
    background-color: #1c1c1c;
    color: #f5c518;
}

.viral-button-primary:focus-visible,
:is(button, a, [role='button'], input[type='submit']):is(.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-indigo-600, .text-blue-600, .text-blue-700):focus-visible {
    outline: 2px solid #111111;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #f5c518;
}

input[type='checkbox'], input[type='radio'] { accent-color: #f5c518; }

/* O símbolo é vertical: preservar sua proporção nas caixas de 24/32 px. */
.viral-brand-symbol {
    object-fit: contain;
    flex-shrink: 0;
}

/* Campos seguem o mesmo foco da marca, sem o anel azul padrão. */
:is(input, select, textarea):not([type='checkbox'], [type='radio']):focus {
    border-color: #d4a600;
    outline: 2px solid #f5c518;
    outline-offset: 2px;
    box-shadow: 0 0 0 1px #111111;
    --tw-ring-color: #f5c518;
}