/* ============================================================================
   TáOK — Tokens da identidade visual
   ============================================================================
   ESTE É O ÚNICO ARQUIVO QUE PRECISA MUDAR PARA TROCAR A MARCA.

   Se você escrever uma cor literal (#FF6B35) numa view, a promessa da Fase 1
   morre — a personalização deixa de ser "editar um arquivo" e vira caçada em
   dezenas de telas.

   Auditoria antes de entregar (o alvo é zero resultado):
     grep -rEn "#[0-9A-Fa-f]{3,6}\b|rgba?\(" app/Views/ | grep -v "var(--"

   ----------------------------------------------------------------------------
   A PALETA E A REGRA QUE ELA IMPÕE
   ----------------------------------------------------------------------------
   Material do cliente: preto #000000, vermelho #e10d16, amarelo #fccb00.

     cor          sobre branco   sobre preto   uso
     ─────────────────────────────────────────────────────────────────────────
     #e10d16      4,9:1  ✓ AA    4,3:1  ~      texto sobre claro; fundo de botão
                                               COM TEXTO BRANCO
     #fccb00      1,5:1  ✗       13,7:1 ✓ AAA  SÓ como fundo, SEMPRE com texto
                                               preto — nunca como cor de texto

   O amarelo é a cor mais forte da marca e a mais fácil de usar errado. Link
   amarelo, badge amarelo com texto branco, título amarelo sobre a home clara:
   os três ficam ilegíveis. A própria logo ensina o uso certo — amarelo
   preenchido, contorno preto.

   Por isso existem --on-primary e --on-accent: a regra vive num token, não na
   memória de quem escreve a view. Fundo --accent pede cor --on-accent, sempre.
   ============================================================================ */

:root {
    /* ===================== MARCA ===================== */

    --primary:       #e10d16;
    --primary-rgb:   225, 13, 22;
    --primary-light: #f5333c;
    --primary-dark:  #a80a10;
    --on-primary:    #ffffff;

    --accent:        #fccb00;
    --accent-rgb:    252, 203, 0;
    --accent-light:  #ffdb4d;
    --accent-dark:   #d4aa00;
    --on-accent:     #000000;

    /* O preto da marca. Não é --text-primary: este é a COR DA MARCA (barra do
       topo, contorno, fundo do favicon) e não muda no tema escuro. */
    --brand-ink:     #000000;
    --brand-ink-rgb: 0, 0, 0;
    --on-brand-ink:  #fccb00;

    /* --primary-rgb NÃO é redundância: sombras e fundos translúcidos usam
       rgba(var(--primary-rgb), .3) e o CSS não converte HEX para RGB sozinho.
       Atualizar um e esquecer o outro é o motivo mais comum de "mudei a cor e o
       brilho continuou vermelho". */

    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    --gradient-destaque: linear-gradient(135deg, var(--accent) 0%, var(--primary) 130%);

    /* ===================== TIPOGRAFIA ===================== */
    /* Pendência: o cliente não enviou tipografia (docs/10 §5). Fredoka e Inter
       são a escolha da contratada, registrada em docs/10 §4.2 — Fredoka porque
       é a livre que mais se aproxima do lettering arredondado da logo e tem o
       latino completo (acento do português inclusive, onde a maioria das
       display gratuitas falha); Inter no corpo porque tabela financeira e nome
       de atleta pedem legibilidade, não personalidade.

       Sempre com fallback de sistema: se o Google Fonts cair ou estiver
       bloqueado na rede do cliente, a página não vira Times New Roman. */
    --font-titulo: 'Fredoka', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-corpo:  'Inter',   system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono:   ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

    /* ===================== TEMA CLARO — O PADRÃO ===================== */
    /* Fica no :root porque é o tema que o visitante vê sem escolher nada.
       O escuro é a alternativa, em [data-theme="dark"] mais abaixo. */

    /* Neutros mornos e não azulados: cinza-azulado ao lado de amarelo e
       vermelho puxa a paleta para um contraste sujo. */
    --bg-deepest:  #ecebe7;
    --bg-body:     #f6f5f2;
    --bg-surface:  #ffffff;
    --bg-elevated: #ffffff;
    --bg-hover:    #f0efeb;
    --bg-sunken:   #faf9f7;

    --border:        rgba(20, 18, 14, 0.12);
    --border-forte:  rgba(20, 18, 14, 0.22);
    --border-suave:  rgba(20, 18, 14, 0.07);

    --text-primary:   #14120e;
    --text-secondary: #56514a;
    --text-muted:     #8b857c;
    --text-inverso:   #ffffff;

    --shadow-sm: 0 1px 2px  rgba(20, 18, 14, 0.06), 0 1px 3px rgba(20, 18, 14, 0.05);
    --shadow-md: 0 4px 12px rgba(20, 18, 14, 0.08), 0 2px 4px rgba(20, 18, 14, 0.04);
    --shadow-lg: 0 12px 32px rgba(20, 18, 14, 0.12), 0 4px 8px rgba(20, 18, 14, 0.05);
    --shadow-destaque: 0 8px 24px rgba(var(--primary-rgb), 0.28);

    /* ===================== SEMÂNTICAS ===================== */
    /* --danger é um vermelho MAIS FECHADO que o da marca, de propósito: com os
       dois idênticos, "Salvar" e "Excluir definitivamente" ficariam com a mesma
       cor, e a segunda não pode parecer a ação principal da tela. */
    --success:     #12784a;  --success-rgb: 18, 120, 74;   --success-bg: #e7f5ee;
    --warning:     #96620a;  --warning-rgb: 150, 98, 10;   --warning-bg: #fdf3dd;
    --danger:      #a4101a;  --danger-rgb:  164, 16, 26;   --danger-bg:  #fdeaea;
    --info:        #0b5c96;  --info-rgb:    11, 92, 150;   --info-bg:    #e6f1f9;
    --neutro-bg:   #efeeea;

    /* ===================== ESTRUTURA (não é marca) ===================== */

    --radius-sm: 8px;    --radius-md: 12px;
    --radius-lg: 18px;   --radius-xl: 26px;   --radius-pill: 999px;

    --transition-fast:   140ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 260ms cubic-bezier(0.22, 0.9, 0.3, 1);

    --header-altura: 68px;
    --container-max: 1200px;
}

/* ============================================================================
   TEMA ESCURO — alternativa, pelo alternador
   ----------------------------------------------------------------------------
   Só os tokens que MUDAM são redefinidos. As cores da marca continuam valendo,
   o que garante que a identidade é a mesma nos dois temas — e é o que permite
   uma logo só (amarela com contorno preto lê nos dois fundos).

   O atributo vai no <html>. A escolha do visitante fica em localStorage e é
   aplicada ANTES da primeira pintura pelo script inline do <head>, senão a tela
   pisca em claro antes de escurecer a cada navegação (docs/05 §6).
   ============================================================================ */

[data-theme="dark"] {
    --bg-deepest:  #060607;
    --bg-body:     #0e0e10;
    --bg-surface:  #17171a;
    --bg-elevated: #1e1e23;
    --bg-hover:    #26262c;
    --bg-sunken:   #121214;

    --border:       rgba(255, 255, 255, 0.12);
    --border-forte: rgba(255, 255, 255, 0.24);
    --border-suave: rgba(255, 255, 255, 0.06);

    --text-primary:   #f4f2ee;
    --text-secondary: #a9a39a;
    --text-muted:     #736d64;

    --shadow-sm: 0 1px 2px  rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

    /* Semânticas clareadas: o mesmo verde #12784a que dá 4,8:1 sobre branco cai
       para 2,1:1 sobre #17171a e some. */
    --success:   #4ade80;  --success-bg: rgba(74, 222, 128, 0.12);
    --warning:   #fbbf24;  --warning-bg: rgba(251, 191, 36, 0.12);
    --danger:    #f87171;  --danger-bg:  rgba(248, 113, 113, 0.12);
    --info:      #60a5fa;  --info-bg:    rgba(96, 165, 250, 0.12);
    --neutro-bg: rgba(255, 255, 255, 0.06);

    /* O vermelho da marca sobre fundo quase preto dá 4,3:1 — passa raspando
       para texto grande e reprova para corpo. Como TEXTO no escuro usamos a
       versão clara; como FUNDO de botão o --primary continua, porque ali o
       contraste que importa é com o branco do texto. */
    --primary-texto-escuro: #ff6b6b;
}

/* ============================================================================
   RESET E BASE
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-corpo);
    font-size: 15px;
    line-height: 1.6;
    background: var(--bg-body);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Sem isto a página inteira sacode horizontalmente quando um único card
       estoura a largura no celular. */
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-titulo);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--primary-dark); text-decoration: underline; }

/* :where() zera a especificidade do `a`, e isso NÃO é preciosismo.
 *
 * Escrito como `[data-theme="dark"] a`, o seletor tem especificidade (0,1,1) e
 * ganha de QUALQUER classe de componente — que tem (0,1,0). O efeito, visto na
 * primeira captura do tema escuro: todo botão que é um `<a>` perdia a própria
 * cor e herdava a de link. "Criar conta" ficava com texto salmão sobre amarelo
 * e "Quero me inscrever" com texto salmão sobre vermelho.
 *
 * É a mesma família de defeito que o `btn-outline-light` de docs/07 §5.1, e
 * mais grave aqui porque atinge o botão principal de conversão.
 *
 * Com `:where(a)` o total volta a (0,1,0), empata com as classes, e a ordem dos
 * arquivos decide — app.css vem depois e vence. */
[data-theme="dark"] :where(a)       { color: var(--primary-texto-escuro); }
[data-theme="dark"] :where(a:hover) { color: var(--accent); }

img, svg, video { max-width: 100%; height: auto; }

hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.9em; }

/* Foco visível em tudo que recebe teclado. Remover o outline sem repor um
   equivalente deixa quem navega por Tab sem saber onde está. */
:focus-visible {
    outline: 3px solid rgba(var(--primary-rgb), 0.55);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

::selection { background: var(--accent); color: var(--on-accent); }

/* ============================================================================
   MARCA — logo
   ============================================================================
   Altura fixa, largura automática. Fixar as duas distorce logo de proporção
   diferente da prevista (docs/05 §4).
   ============================================================================ */

.logo      { height: 34px; width: auto; display: block; }
.logo-mini { height: 30px; width: auto; display: block; }

@media (max-width: 768px) {
    .logo { height: 28px; }
}

/* ============================================================================
   UTILITÁRIOS DE MARCA
   ============================================================================ */

.texto-marca   { color: var(--primary); }
.texto-destaque{ color: var(--accent); }   /* SÓ sobre fundo escuro */
.fundo-marca   { background: var(--primary); color: var(--on-primary); }
.fundo-destaque{ background: var(--accent); color: var(--on-accent); }
.fundo-preto   { background: var(--brand-ink); color: var(--text-inverso); }

/* Truncar texto em flexbox exige min-width:0 no filho. NÃO use "min-w-0": é
   classe do Tailwind e não existe no Bootstrap 5 (docs/07 §5.2). */
.texto-truncado {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Visível só para leitor de tela. */
.so-leitor {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Pular para o conteúdo: aparece no primeiro Tab. */
.pular-conteudo {
    position: absolute; left: 8px; top: -60px; z-index: 2000;
    background: var(--accent); color: var(--on-accent);
    padding: 10px 18px; border-radius: var(--radius-md); font-weight: 600;
    transition: top var(--transition-fast);
}
.pular-conteudo:focus { top: 8px; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}