/* ==========================================================================
   Turminha AMAI - camada 1: base
   Escrita sobre Bootstrap 5.3 (vendorizado em static/vendor/), sem build step.

   O sistema visual vem em tres camadas, nesta ordem obrigatoria:

       bootstrap.min.css -> base.css -> components.css -> site.css

   base.css        tokens --ta-*, variaveis globais do Bootstrap, base e foco
   components.css  pecas reutilizaveis: overrides de componente do Bootstrap,
                   icones, cards, formas, botoes flutuantes, reveal, anti-spam
   site.css        as secoes desta pagina, na ordem em que aparecem

   Os tokens so existem AQUI. As outras camadas consomem, nunca redeclaram.

   Regra de contraste desta base: o vermelho da marca (#EE021B) tem 4,21:1
   sobre o creme #FFF5F3, o que REPROVA em WCAG AA para texto normal. Por isso
   ele so aparece como PREENCHIMENTO (botoes, faixas, icones grandes) com texto
   branco por cima. Para texto e link vermelho use --ta-red-600 (6,25:1).
   Pelo mesmo motivo as cores semanticas do Bootstrap estao proibidas aqui:
   .text-warning (#ffc107) da 1,6:1 e .text-info (#0dcaf0) da 2,0:1.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
    /* Marca. As duas cores saem do logotipo. */
    --ta-red: #EE021B;          /* preenchimento + texto branco   4,51:1 */
    --ta-red-600: #C4001A;      /* texto e link sobre claro       6,25:1 */
    --ta-red-700: #A80017;      /* enfase                         7,84:1 */
    --ta-red-050: #FFECEE;
    --ta-blue: #1D61D8;         /* preenchimento                  5,59:1 */
    --ta-blue-700: #123A85;     /* titulos, footer, faixa CTA    10,66:1 */
    --ta-blue-050: #E9F0FD;

    /* Acentos dos cartoes de diferencial */
    --ta-green-600: #167048;    /* 6,10:1 */
    --ta-green-050: #E6F4EC;
    --ta-amber-800: #7A4B00;    /* 6,74:1 sobre o proprio tint */
    --ta-amber-050: #FFF3DC;

    /* Neutros */
    --ta-ink: #2E3138;          /* corpo         13,02:1 */
    --ta-ink-muted: #5F646E;    /* secundario     5,94:1 */
    --ta-cream: #FFF5F3;
    --ta-line: #EADFDC;

    /* Sombras azuladas, nunca pretas: preto puro suja o creme */
    --ta-shadow-sm: 0 1px 2px rgba(18, 58, 133, .06), 0 2px 8px rgba(18, 58, 133, .06);
    --ta-shadow-md: 0 6px 24px rgba(18, 58, 133, .10);

    --ta-nav-h: 4.75rem;

    /* Escala tipografica fluida: dispensa media query por titulo */
    --ta-fs-h1: clamp(2rem, 1.3rem + 3.2vw, 3.5rem);
    --ta-fs-h2: clamp(1.6rem, 1.2rem + 1.9vw, 2.5rem);
    --ta-fs-h3: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
    --ta-secao-y: clamp(3.5rem, 8vw, 7rem);
}

/* --- Bootstrap: variaveis globais ----------------------------------------- */
/* Em 5.3 .bg-primary/.text-primary/.link-primary leem estas. */

:root {
    --bs-primary: var(--ta-red);
    --bs-primary-rgb: 238, 2, 27;
    --bs-secondary: var(--ta-blue);
    --bs-secondary-rgb: 29, 97, 216;
    --bs-primary-bg-subtle: var(--ta-red-050);
    --bs-primary-border-subtle: #F8B9C0;
    --bs-primary-text-emphasis: var(--ta-red-700);

    --bs-body-color: var(--ta-ink);
    --bs-body-color-rgb: 46, 49, 56;
    --bs-body-bg: #fff;
    --bs-body-font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.7;

    --bs-heading-color: var(--ta-blue-700);
    --bs-link-color-rgb: 196, 0, 26;
    --bs-link-hover-color-rgb: 168, 0, 23;

    --bs-border-color: var(--ta-line);
    --bs-border-radius: 1rem;
    --bs-border-radius-sm: .625rem;
    --bs-border-radius-lg: 1.5rem;
    --bs-border-radius-xl: 2rem;

    --bs-focus-ring-width: 3px;
    --bs-focus-ring-color: rgba(18, 58, 133, .55);
}

/* --- Base ----------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-family: "Fredoka", "Nunito", system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.15;
}

h1, .h1 { font-size: var(--ta-fs-h1); }
h2, .h2 { font-size: var(--ta-fs-h2); }
h3, .h3 { font-size: var(--ta-fs-h3); }

/* Medida de linha. O site antigo usava max-width:80%, o que dava ~140
   caracteres por linha em desktop - praticamente ilegivel. */
.ta-medida { max-width: 65ch; }
.ta-medida-curta { max-width: 52ch; }

/* Toda ancora aterrissava por baixo do header fixo. */
:target,
section[id],
div[id] {
    scroll-margin-top: calc(var(--ta-nav-h) + 1rem);
}

.ta-secao { padding-block: var(--ta-secao-y); }
.ta-creme { background: var(--ta-cream); }

/* --- Foco ----------------------------------------------------------------- */

:focus-visible {
    outline: 3px solid var(--ta-blue-700);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Sobre o vermelho o anel azul so daria 2,4:1; anel escuro + halo branco. */
.btn-primary:focus-visible,
.ta-fab:focus-visible {
    outline-color: var(--ta-ink);
    box-shadow: 0 0 0 2px #fff;
}

.ta-skip {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1090;
    padding: .75rem 1.25rem;
    border-radius: 50rem;
    background: var(--ta-blue-700);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}