/* ============================================================
   iBooster Demo Lab · design tokens
   Fonte unica de verdade - consumido por design.css e views.css.

   AS CORES vem da identidade iBooster, conferidas contra o vetor em
   public/brand/ibooster-logo.svg: vermelho #DC2626 como marca, com
   apoio no quase-preto #141414 e fundo claro #FCFCFA.

   POR QUE DOIS VERMELHOS. O vermelho oficial (#DC2626) carrega marca e
   acao; os tons vizinhos organizam hover e acento. Como esta e uma
   plataforma de recrutamento, que precisa funcionar para quem enxerga
   mal e em tela de celular no sol, a paleta separa:

     --marca   #DC2626  o vermelho oficial do logotipo. SUPERFICIE e
                        acento: filete do topo, barra de progresso,
                        preenchimento de chip, tile da marca. Nunca
                        texto pequeno.
     --brand   #DC2626  o mesmo vermelho, com contraste AA sobre
                        branco. Acao e texto: botao, aba ativa, link,
                        numero de destaque. Hover cai para o
                        "brand-ink" #7F1D1D.

   O PROBLEMA DE STATUS QUANDO A MARCA E VERMELHA. Numa tela de
   resultado, vermelho tem de querer dizer "reprovado". Aqui vermelho
   ja quer dizer "iBooster". A saida e uma disciplina rigida:

     vermelho = MARCA, ACAO e NAVEGACAO. Nunca status sozinho.
     azul-petroleo = aprovado     ambar = atencao
     --danger #B3261E = reprovado / violacao, sempre acompanhado de
                rotulo ou icone (cor nunca e o unico sinal)
     dourado  = exclusivamente IA

   E, como no resto do produto, cor nunca e o unico sinal: todo estado
   aparece tambem em rotulo ou icone.

   UMA FAMILIA SO. Inter cobre display e leitura; o display se distingue
   por peso (800) e por entressilha negativa, sem fonte proprietaria
   nova. Uma fonte a menos tambem e uma requisicao a menos no celular
   do candidato.
   ============================================================ */
:root{
  /* brand - vermelho de ACAO, o vermelho oficial do logotipo, com contraste AA */
  --brand:#DC2626; --brand2:#B91C1C; --brand-ink:#7F1D1D;
  --brandsoft:rgba(220,38,38,.08); --brandsoft2:rgba(220,38,38,.16);
  /* rampa monocromatica para a barra de mix de dificuldade (facil/medio/dificil) */
  --brand-200:#FECACA; --brand-500:#EF4444;

  /* marca - o vermelho OFICIAL do logotipo. Superficie e acento;
     fora de texto pequeno. */
  --marca:#DC2626; --marca2:#F87171;
  --marca-grad:linear-gradient(180deg,#F87171 0%,#DC2626 100%);

  /* accent - alias de --brand/--marca, mantido porque design.css e
     views.css ja falam "accent" para o destaque institucional */
  --accent:#DC2626; --accent-ink:#B91C1C; --accent2:#EF4444;
  --accentsoft:rgba(220,38,38,.08); --accentsoft2:rgba(220,38,38,.16);

  /* neutros - cinza NEUTRO e muito claro, quente e sem tingir de vermelho:
     mantem legibilidade e deixa a marca aparecer sozinha nos acentos. */
  --bg:#F7F6F4; --bg2:#FCFCFA; --card:#FFFFFF; --card2:#F5F4F1;
  --line:#E8E6E1; --line2:#D6D3CD;
  --txt:#1A1A1C; --mut:#67676E; --mut2:#8A8A92;
  /* tinta de display */
  --ink:#141414;

  /* semanticos (fill suave + tinta). Cor nunca e o unico sinal:
     todo estado aparece tambem em rotulo ou icone. Aprovado fica no
     azul-petroleo para nao competir com o vermelho da marca. */
  --ok:#0B6E8F;   --ok-ink:#084F68;   --oksoft:rgba(11,110,143,.14);
  --warn:#8A6100; --warn-ink:#6B4B00; --warnsoft:rgba(255,184,0,.18);
  --danger:#B3261E;                   --dangersoft:rgba(179,38,30,.10);

  /* accent IA - deliberadamente fora da familia da marca */
  --gold:#7A6220; --gold-ink:#5E4B18; --goldsoft:rgba(122,98,32,.10);

  /* superficies escuras */
  --code-bg:#17171A; --code-txt:#E8E8EB;
  --scrim:rgba(15,15,17,.88); --scrim-light:rgba(15,15,17,.6);

  /* tipografia - uma familia so (ver cabecalho). O display se separa
     do corpo por peso e entressilha, nao por outra fonte. */
  --display:'Inter','Segoe UI',Arial,sans-serif;
  --fs-micro:12px; --fs-xs:12px; --fs-sm:13px; --fs-base:14px;
  --fs-md:16px; --fs-lg:20px; --fs-xl:24px; --fs-display:32px;
  --ls-caps:.08em; --ls-eyebrow:.12em; --ls-tight:-.02em; --ls-tighter:-.03em;
  --lh-display:1.15; --lh-heading:1.25; --lh-body:1.55; --lh-relaxed:1.7;
  --mono:'Cascadia Code',Consolas,ui-monospace,monospace;

  /* espacamento (base 4) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s12:48px;
  --gutter:24px; --header-h:64px;

  /* raios - card 12, superficie grande 16. O botao pilula do app de
     consumo NAO foi trazido: num painel com muitos botoes juntos,
     pilula vira ruido. Fica no candidato, onde ha um botao por tela. */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;

  /* sombras - neutras e discretas; a tela se estrutura por filete, nao
     por sombra */
  --shadow:0 1px 3px rgba(15,15,17,.06);
  --shadow-lg:0 10px 30px rgba(15,15,17,.08);
  --shadow-pop:0 8px 30px rgba(15,15,17,.20);

  /* motion */
  --t-fast:.12s; --t-med:.2s;
}

/* Titulo, nome do produto e numero de vitrine no peso de display.
   Mesma familia do corpo: o que muda e peso e entressilha. */
h1,h2,h3,.prod,.kpi .v,.big-score .n,.lp-n,.hero h1{
  font-family:var(--display);font-weight:800;letter-spacing:var(--ls-tight)
}
.hero h1,.big-score .n,.lp-n{letter-spacing:var(--ls-tighter)}

/* O botao principal do candidato (bloco, tamanho grande) vira pilula:
   e o unico botao da tela, e e o gesto que os apps iBooster tem. */
.btn.block.lg{border-radius:var(--r-pill)}