/* SandHub — Identidade visual "Pôr do Sol na Praia"
   Paleta oficial. Importar antes de site.css / sobrescrever variáveis do Bootstrap 5. */
:root {
    --sh-coral: #FF6B4A;   /* Primária   — CTAs, destaques, marca "Hub" */
    --sh-teal: #17BEBB;    /* Secundária — links, badges de etapa, acentos */
    --sh-navy: #0B3954;    /* Escura     — texto forte, headers, marca "Sand" */
    --sh-areia: #F6E7CB;   /* Fundo      — superfícies/cards claros */
    --sh-sol: #FFC857;     /* Destaque   — avisos, troféus/pontuação, sol */

    /* Mapeamento para o Bootstrap 5 (sobrescreve via classes utilitárias/tema) */
    --bs-primary: var(--sh-coral);
    --bs-secondary: var(--sh-teal);
    --bs-dark: var(--sh-navy);
    --bs-light: var(--sh-areia);
    --bs-warning: var(--sh-sol);
}

/* Google Material Symbols — biblioteca de ícones oficial do SandHub */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
}

/* ===== Tema do Bootstrap 5 com a paleta SandHub =====
   O Bootstrap não usa --bs-primary direto nos componentes; é preciso remapear o -rgb,
   as variáveis dos botões e o anel de foco (que por padrão é azul). */
:root {
    --bs-primary-rgb: 255, 107, 74;
    --bs-secondary-rgb: 23, 190, 187;
    --bs-success-rgb: 23, 190, 187;
    --bs-link-color: var(--sh-coral);
    --bs-link-color-rgb: 255, 107, 74;
    --bs-link-hover-color: #e2542f;
    --bs-link-hover-color-rgb: 226, 84, 47;
    --bs-focus-ring-color: rgba(23, 190, 187, .25);
}

.btn-primary {
    --bs-btn-bg: var(--sh-coral);
    --bs-btn-border-color: var(--sh-coral);
    --bs-btn-hover-bg: #ef5d3c;
    --bs-btn-hover-border-color: #e2542f;
    --bs-btn-active-bg: #d94e2c;
    --bs-btn-active-border-color: #cc4926;
    --bs-btn-disabled-bg: var(--sh-coral);
    --bs-btn-disabled-border-color: var(--sh-coral);
}

.btn-outline-primary {
    --bs-btn-color: var(--sh-coral);
    --bs-btn-border-color: var(--sh-coral);
    --bs-btn-hover-bg: var(--sh-coral);
    --bs-btn-hover-border-color: var(--sh-coral);
    --bs-btn-active-bg: var(--sh-coral);
    --bs-btn-active-border-color: var(--sh-coral);
}

.text-primary { color: var(--sh-coral) !important; }
.bg-primary { background-color: var(--sh-coral) !important; }
.text-bg-primary { background-color: var(--sh-coral) !important; color: #fff !important; }
.badge.text-bg-success { background-color: var(--sh-teal) !important; }

/* Foco com a cor da marca — substitui o anel azul padrão do Bootstrap nos inputs/botões */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus-visible,
.btn-check:focus + .btn {
    border-color: var(--sh-teal);
    box-shadow: 0 0 0 .25rem rgba(23, 190, 187, .25);
}

.form-check-input:checked {
    background-color: var(--sh-coral);
    border-color: var(--sh-coral);
}

/* Feedback de campo obrigatório após tentativa de envio (diretiva <validation>). */
form.ng-submitted .form-control.ng-invalid,
form.ng-submitted .form-select.ng-invalid {
    border-color: #dc3545;
}