/*
  Ranqueado · tokens do redesign
  Gerado a partir das variáveis do Figma em 05/10/2026.

  Como usar
  - Primitivas: a paleta crua. Não use direto em componente.
  - Semânticas: o que o componente usa. Mudam entre claro e escuro.
  - Uma seção escura dentro de uma página clara recebe a classe .tema-escuro.
  - Uma ilha clara dentro de uma seção escura recebe a classe .tema-claro.
*/

:root {
  /* ---------- Primitivas ---------- */
  --navy-50: #EEF0FB;  --navy-100: #DCE0F7; --navy-200: #B9C0EE; --navy-300: #8F99DD;
  --navy-400: #6470C4; --navy-500: #414DA6; --navy-600: #2C3787; --navy-700: #1C2569;
  --navy-800: #101852; --navy-900: #0A1049; --navy-950: #040A40;

  --royal-50: #EEF0FF;  --royal-100: #DEE2FF; --royal-200: #BDC4FF; --royal-300: #939EFF;
  --royal-400: #6474FF; --royal-500: #3D50FF; --royal-600: #132BFF; --royal-700: #0B20DB;
  --royal-800: #0919AD; --royal-900: #091685; --royal-950: #060E52;

  --neon-50: #FBFFE5;  --neon-100: #F4FFC2; --neon-200: #EAFF8A; --neon-300: #DCFF47;
  --neon-400: #CEFF00; --neon-500: #B3E000; --neon-600: #8BAF00; --neon-700: #6A8500;
  --neon-800: #536807; --neon-900: #45570B; --neon-950: #253100;

  --neutral-0: #FFFFFF;   --neutral-50: #F2F3FF;  --neutral-100: #E7E9F7; --neutral-200: #D6D9E4;
  --neutral-300: #B8BDCD; --neutral-400: #9198AE; --neutral-500: #6E7590; --neutral-600: #555B74;
  --neutral-700: #41465B; --neutral-800: #2B2F40; --neutral-900: #1A1D2B; --neutral-950: #0E1019;

  --green-50: #ECFDF3; --green-100: #D1FADF; --green-300: #86EFAC; --green-400: #4ADE80;
  --green-500: #16A34A; --green-600: #15803D; --green-700: #166534;
  --amber-50: #FFF8E6; --amber-100: #FEEFC3; --amber-300: #FCD34D; --amber-400: #FBBF24;
  --amber-500: #F59E0B; --amber-600: #D97706; --amber-700: #B45309;
  --red-50: #FEF2F2; --red-100: #FEE2E2; --red-300: #FCA5A5; --red-400: #F87171;
  --red-500: #DC2626; --red-600: #B91C1C; --red-700: #991B1B; --red-800: #771515;

  /* ---------- Marca (o white-label troca estes seis) ---------- */
  --marca-primaria: var(--royal-600);
  --marca-primaria-hover: var(--royal-700);
  --marca-primaria-pressionada: var(--royal-800);
  --marca-primaria-suave: var(--royal-50);
  --marca-secundaria: var(--navy-950);
  --marca-destaque: var(--neon-400);

  /* ---------- Dimensões ---------- */
  --espaco-0: 0px;   --espaco-1: 4px;   --espaco-2: 8px;   --espaco-3: 12px;
  --espaco-4: 16px;  --espaco-5: 20px;  --espaco-6: 24px;  --espaco-8: 32px;
  --espaco-10: 40px; --espaco-12: 48px; --espaco-16: 64px; --espaco-20: 80px; --espaco-24: 96px;

  --raio-nenhum: 0px; --raio-xs: 4px; --raio-sm: 6px; --raio-md: 10px;
  --raio-lg: 16px;    --raio-xl: 24px; --raio-total: 999px;

  /* o corte de 45 graus, por tamanho */
  --corte-p: 8px; --corte-m: 12px; --corte-g: 14px; --corte-xg: 32px; --corte-2xg: 72px;

  --controle-altura-p: 36px; --controle-altura-m: 44px; --controle-altura-g: 52px;
  --borda-fina: 1px; --borda-base: 2px;
  --icone-p: 16px; --icone-m: 20px; --icone-g: 24px;

  --duracao-rapida: 120ms; --duracao-padrao: 200ms; --duracao-lenta: 320ms;

  --layout-conteudo-max: 1200px;
  --layout-barra-lateral: 264px;
  --layout-margem-mobile: 16px;
  --layout-margem-desktop: 32px;

  /* breakpoints, só para referência: 640, 768, 1024, 1280, 1536 */

  /* ---------- Fontes ---------- */
  --fonte-titulo: "DM Sans", system-ui, sans-serif;
  --fonte-texto: "Poppins", system-ui, sans-serif;
}

/* ---------- Semânticas · modo claro (padrão) ----------
   .tema-claro serve para uma ilha clara dentro de uma seção escura
   (por exemplo, a prévia do resultado dentro da primeira dobra). */
:root,
.tema-claro {
  --fundo-pagina: var(--neutral-50);
  --fundo-superficie: var(--neutral-0);
  --fundo-sutil: var(--neutral-100);
  --fundo-inverso: var(--navy-950);
  --fundo-inverso-elevado: var(--navy-800);
  --fundo-destaque: var(--neon-400);
  --fundo-marca: var(--royal-600);

  --texto-principal: var(--navy-950);
  --texto-secundario: var(--neutral-600);
  --texto-apagado: var(--neutral-500);
  --texto-inverso: var(--neutral-0);
  --texto-inverso-secundario: var(--navy-200);
  --texto-sobre-destaque: var(--navy-950);
  --texto-sobre-marca: var(--neutral-0);
  --texto-sobre-suave: var(--royal-600);
  --texto-marca: var(--royal-600);
  --texto-link: var(--royal-600);
  --texto-desabilitado: var(--neutral-400);

  --borda-padrao: var(--neutral-200);
  --borda-forte: var(--neutral-300);
  --borda-foco: var(--royal-600);
  --borda-marca: var(--royal-600);
  --borda-inversa: var(--navy-700);

  --acao-primaria: var(--marca-primaria);
  --acao-primaria-hover: var(--marca-primaria-hover);
  --acao-primaria-pressionada: var(--marca-primaria-pressionada);
  --acao-primaria-suave: var(--royal-50);
  --acao-suave-hover: var(--royal-100);
  --acao-suave-pressionada: var(--royal-200);
  --acao-destaque: var(--neon-400);
  --acao-destaque-hover: var(--neon-300);
  --acao-destaque-pressionada: var(--neon-500);
  --acao-secundaria: var(--neutral-0);
  --acao-secundaria-hover: var(--neutral-50);
  --acao-secundaria-pressionada: var(--neutral-100);
  --acao-secundaria-borda: var(--neutral-300);
  --acao-fantasma-hover: var(--neutral-100);
  --acao-fantasma-pressionada: var(--neutral-200);
  --acao-perigo: var(--red-600);
  --acao-perigo-hover: var(--red-700);
  --acao-perigo-pressionada: var(--red-800);
  --acao-desabilitada: var(--neutral-100);

  --controle-fundo: var(--neutral-0);
  --controle-fundo-desabilitado: var(--neutral-50);
  --controle-borda: var(--neutral-500);
  --controle-borda-hover: var(--neutral-700);
  --controle-trilho: var(--neutral-400);
  --controle-marcado: var(--royal-600);
  --controle-marcado-hover: var(--royal-700);
  --controle-sobre-marcado: var(--neutral-0);
  --controle-botao: var(--neutral-0);

  --foco-anel: var(--royal-600);
  --foco-anel-inverso: var(--neon-400);
  --foco-halo: var(--royal-100);

  --progresso-trilho: var(--neutral-200);
  --progresso-valor: var(--royal-600);
  --etiqueta-neutro-fundo: var(--neutral-100);

  --feedback-sucesso: var(--green-600);
  --feedback-sucesso-fundo: var(--green-50);
  --feedback-alerta: var(--amber-700);
  --feedback-alerta-fundo: var(--amber-50);
  --feedback-erro: var(--red-600);
  --feedback-erro-fundo: var(--red-50);
  --feedback-info: var(--royal-600);
  --feedback-info-fundo: var(--royal-50);
}

/* ---------- Semânticas · modo escuro ----------
   Use em seções escuras (primeira dobra, "Por que é diferente", inscrição confirmada)
   e no app, quando o modo escuro existir. */
.tema-escuro {
  --fundo-pagina: var(--navy-950);
  --fundo-superficie: var(--navy-800);
  --fundo-sutil: var(--navy-900);
  --fundo-inverso: var(--neutral-0);
  --fundo-inverso-elevado: var(--neutral-50);

  --texto-principal: var(--neutral-0);
  --texto-secundario: var(--navy-200);
  --texto-apagado: var(--navy-300);
  --texto-inverso: var(--navy-950);
  --texto-inverso-secundario: var(--neutral-600);
  --texto-sobre-suave: var(--royal-200);
  --texto-marca: var(--neon-400);
  --texto-link: var(--royal-300);
  --texto-desabilitado: var(--navy-400);

  --borda-padrao: var(--navy-700);
  --borda-forte: var(--navy-600);
  --borda-foco: var(--neon-400);
  --borda-marca: var(--neon-400);
  --borda-inversa: var(--neutral-200);

  --acao-primaria-hover: var(--royal-500);
  --acao-primaria-pressionada: var(--royal-700);
  --acao-primaria-suave: var(--royal-900);
  --acao-suave-hover: var(--royal-800);
  --acao-suave-pressionada: var(--royal-700);
  --acao-secundaria: var(--navy-800);
  --acao-secundaria-hover: var(--navy-700);
  --acao-secundaria-pressionada: var(--navy-600);
  --acao-secundaria-borda: var(--navy-500);
  --acao-fantasma-hover: var(--navy-800);
  --acao-fantasma-pressionada: var(--navy-700);
  --acao-perigo: var(--red-500);
  --acao-perigo-hover: var(--red-600);
  --acao-perigo-pressionada: var(--red-700);
  --acao-desabilitada: var(--navy-800);

  --controle-fundo: var(--navy-900);
  --controle-fundo-desabilitado: var(--navy-900);
  --controle-borda: var(--navy-400);
  --controle-borda-hover: var(--navy-200);
  --controle-trilho: var(--navy-500);
  --controle-marcado: var(--neon-400);
  --controle-marcado-hover: var(--neon-300);
  --controle-sobre-marcado: var(--navy-950);

  --foco-anel: var(--neon-400);
  --foco-anel-inverso: var(--royal-600);
  --foco-halo: var(--royal-800);

  --progresso-trilho: var(--navy-700);
  --progresso-valor: var(--neon-400);
  --etiqueta-neutro-fundo: var(--navy-700);

  --feedback-sucesso: var(--green-400);
  --feedback-sucesso-fundo: #4ADE8029;
  --feedback-alerta: var(--amber-300);
  --feedback-alerta-fundo: #FCD34D29;
  --feedback-erro: var(--red-400);
  --feedback-erro-fundo: #F871712E;
  --feedback-info: var(--royal-300);
  --feedback-info-fundo: #939EFF2E;
}

/* ---------- O corte ----------
   Corte duplo: canto superior direito e canto inferior esquerdo.
   Defina --corte no elemento (ou use um dos tamanhos acima). */
.corte-duplo {
  --corte: var(--corte-m);
  clip-path: polygon(
    0 0,
    calc(100% - var(--corte)) 0,
    100% var(--corte),
    100% 100%,
    var(--corte) 100%,
    0 calc(100% - var(--corte))
  );
}

/* Divisão diagonal entre seções.
   A seção colorida recebe os dois triângulos, pintados com a cor da vizinha:
   --cor-acima no canto superior direito, --cor-abaixo no canto inferior esquerdo. */
.secao-corte { position: relative; --tamanho-corte: 40px; }
@media (min-width: 1024px) { .secao-corte { --tamanho-corte: 96px; } }
.secao-corte::before,
.secao-corte::after {
  content: ""; position: absolute; width: var(--tamanho-corte); height: var(--tamanho-corte);
}
.secao-corte::before { top: 0; right: 0; background: var(--cor-acima); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.secao-corte::after  { bottom: 0; left: 0; background: var(--cor-abaixo); clip-path: polygon(0 0, 0 100%, 100% 100%); }