/* Branding — Overrides de variáveis Bootstrap
   Mantém as cores da Escola de Surf em todos os componentes Bootstrap. */

:root {
    /* Token base da marca — definido aqui para o branding.css ser
       auto-suficiente. A landing pública só carrega este ficheiro (não o
       style.css): sem isto, .btn-primary ficava com background inválido
       (transparente/branco) e só se via no hover, que usa cores literais. */
    --color-primary:               #214869;

    --bs-primary:                  var(--color-primary);
    --bs-primary-rgb:              33, 72, 105;
    --bs-primary-text-emphasis:    #0d2336;
    --bs-primary-bg-subtle:        #d1dae2;
    --bs-primary-border-subtle:    #a3b1bb;

    --bs-secondary:                #ffe5b4;
    --bs-secondary-rgb:            248, 221, 176;
    --bs-secondary-text-emphasis:  #5c4a1e;
    --bs-secondary-bg-subtle:      #fef9f2;
    --bs-secondary-border-subtle:  #fdf3e5;

    --bs-success:                  #2d6a4f;
    --bs-success-rgb:              45, 106, 79;
    --bs-success-bg-subtle:        #d4e8e0;
    --bs-success-border-subtle:    #a9d1c1;

    --bs-danger:                   #d62828;
    --bs-danger-rgb:               214, 40, 40;
    --bs-danger-bg-subtle:         #f8d4d4;
    --bs-danger-border-subtle:     #f1a9a9;

    --bs-warning:                  #f77f00;
    --bs-warning-rgb:              247, 127, 0;
    --bs-warning-bg-subtle:        #fee7cc;
    --bs-warning-border-subtle:    #fdd099;
    /* Texto sobre fundos claros: #f77f00 falha WCAG AA (~3.0:1).
       Variante escurecida que mantém o tom âmbar da marca e passa 4.5:1. */
    --bs-warning-text-emphasis:    #7a4a00;
    --bs-warning-text-on-fill:     #1f1300;

    --bs-info:                     #0ea5e9;
    --bs-info-rgb:                 14, 165, 233;
    --bs-info-bg-subtle:           #cce9f8;
    --bs-info-border-subtle:       #99d3f1;
    --bs-info-text-emphasis:       #0a4060;
    --bs-info-text-on-fill:        #062536;

    /* Aliases internos */
    --bs-primary-dark:  #1a3a52;
    --bs-primary-light: #2d5a7a;
}

/* Botões */
.btn-primary {
    --bs-btn-bg:                   var(--color-primary);
    --bs-btn-border-color:         var(--color-primary);
    --bs-btn-hover-bg:             #1a3a52;
    --bs-btn-hover-border-color:   #1a3a52;
    --bs-btn-active-bg:            #2d5a7a;
    --bs-btn-active-border-color:  #2d5a7a;
}

.btn-secondary {
    --bs-btn-bg:                   #ffe5b4;
    --bs-btn-border-color:         #ffe5b4;
    --bs-btn-color:                var(--color-primary);
    --bs-btn-hover-bg:             #e5c890;
    --bs-btn-hover-border-color:   #e5c890;
    --bs-btn-hover-color:          var(--color-primary);
    --bs-btn-active-bg:            #ffe5b4;
    --bs-btn-active-color:         var(--color-primary);
}

.btn-outline-primary {
    --bs-btn-color:                var(--color-primary);
    --bs-btn-border-color:         var(--color-primary);
    --bs-btn-hover-bg:             var(--color-primary);
    --bs-btn-hover-border-color:   var(--color-primary);
    --bs-btn-active-bg:            #1a3a52;
}

/* Focus states */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(33,72,105,0.15);
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(33,72,105,0.3);
}

/* Alertas */
.alert-primary  { --bs-alert-bg: #d1dae2; --bs-alert-color: #0d2336; --bs-alert-border-color: #a3b1bb; }
.alert-success  { --bs-alert-bg: #d4e8e0; --bs-alert-color: #122a1f; --bs-alert-border-color: #a9d1c1; }
.alert-danger   { --bs-alert-bg: #f8d4d4; --bs-alert-color: #561010; --bs-alert-border-color: #f1a9a9; }
.alert-warning  { --bs-alert-bg: #fee7cc; --bs-alert-color: #633200; --bs-alert-border-color: #fdd099; }
.alert-info     { --bs-alert-bg: #cce9f8; --bs-alert-color: #0a4060; --bs-alert-border-color: #99d3f1; }

/* Badges
   Bootstrap default usa texto branco em todos os bg-*. Em #f77f00 (warning)
   e #0ea5e9 (info) isso falha WCAG AA. Forçamos texto escuro nessas variantes. */
.badge.bg-primary   { background-color: var(--color-primary) !important; }
.badge.bg-secondary { background-color: #ffe5b4 !important; color: var(--color-primary) !important; }
.badge.bg-warning   { color: var(--bs-warning-text-on-fill) !important; }
.badge.bg-info      { color: var(--bs-info-text-on-fill)    !important; }

/* .text-warning e .text-info ficam com as cores da marca (laranja e azul-céu).
   Para texto sobre fundos CLAROS, usar a class semântica .text-warning-emphasis
   ou .text-info-emphasis (Bootstrap 5.3) — passam WCAG AA graças aos tokens
   --bs-warning-text-emphasis e --bs-info-text-emphasis definidos acima.

   Regra prática para autores:
     • Texto/ícone sobre fundo escuro/gradient   → .text-warning / .text-info
     • Texto/ícone sobre fundo branco ou subtle  → .text-warning-emphasis / .text-info-emphasis */

/* Progress */
.progress-bar { background-color: var(--color-primary); }

/* Tabelas */
.table-primary {
    --bs-table-bg: #d1dae2;
    --bs-table-color: #0d2336;
}

/* Gradiente secundário */
.bg-gradient-secondary {
    background: linear-gradient(135deg, #ffe5b4 0%, #e5c890 100%) !important;
}

/* Transições suaves globais */
* {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* Touch targets vêm de style.css: base .btn já tem min-height 44px e
   .btn-sm sobe para 44px em (pointer: coarse). Não duplicar aqui — duplicação
   anterior estava a anular o tap-target em ecrãs táteis. */