/* Zenithon Academy — generated from tokens.json */
:root, [data-theme="dark"] {
  --onyx: #0a0a0a; /* Fundo principal de toda peça: site, página de vendas, thumbnail, carrossel, área de aluno. Não existe tema claro. */
  --carbon-black: #1a1a1a; /* Card e superfície elevada sobre onyx. Separa do fundo sem precisar de borda e marca troca de seção. O Guia de Marca v1 trazia #232323: escurecido para uma separação mais sutil, mais colada no fundo. */
  --silver: #b0b0b0; /* Texto de corpo, legenda, borda, ícone inativo e estado desabilitado. Lê sobre onyx e sobre carbon-black. */
  --white: #ffffff; /* Título, texto de destaque e botão de ação primário. Elemento mais forte da tela, então aparece pouco. Lê sobre onyx e carbon-black. */
  --studio-gray: #9a9a9a; /* Fora da paleta de marca. Cinza neutro de estúdio usado só como fundo de retrato, com leve vinheta. Nunca em interface. */
  --danger: #b80c09; /* Erro e alerta, uso funcional apenas, nunca decorativo. Só como fill ou borda de 3px ou mais: como texto sobre onyx fica em 2,4:1 e reprova, então a mensagem de erro em si vai em white ou silver. */
}
:root {
  --space-1: 4px; /* Respiro entre label e o texto que ela titula. */
  --space-2: 8px; /* Espaço entre linhas de um mesmo bloco, ícone e texto. */
  --space-3: 16px; /* Padding interno de botão e espaço entre título e corpo. */
  --space-4: 24px; /* Padding de card em carbon-black. */
  --space-5: 40px; /* Espaço entre blocos dentro de uma seção. */
  --space-6: 72px; /* Espaço entre blocos grandes dentro de uma seção. */
  --space-7: 144px; /* Troca de seção. O respiro entre seções é o que faz o monocromático respirar, então ele é generoso de propósito. */
  --radius-sm: 8px; /* Tag, campo e elemento pequeno. */
  --radius-md: 12px; /* Campo de formulário e elemento retangular de interface. */
  --radius-lg: 22px; /* Card e superfície elevada em carbon-black. Raio grande: o card é um bloco, não uma caixa. */
  --radius-pill: 999px; /* Botão primário e secundário, tag e faixa de aviso. Todo botão da marca é pill. */
  --radius-app: 22%; /* Ícone de app, quadrado de cantos arredondados em onyx ou carbon-black. */
  --font-display: "Hanken Grotesk", system-ui, sans-serif;
  --font-sans: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-display: 600 56px/1.02 var(--font-display); /* Título de capa e herói de página de vendas, sempre em white. Grande sem ser pesado: o tamanho carrega o destaque, não o peso. */
  --text-title: 600 34px/1.12 var(--font-display); /* Título de seção, centralizado, em white. */
  --text-thumb: 800 72px/0.95 var(--font-display); /* Só thumbnail do YouTube e capa de carrossel, em white e caixa alta. É o único lugar que mantém peso máximo. */
  --text-subtitle: 700 20px/1.3 var(--font-display); /* Subtítulo e título de card. White. */
  --text-body: 400 16px/1.6 var(--font-sans); /* Corpo de texto em silver. Parágrafos curtos, porque não existe bloco claro para descansar a vista. */
  --text-body-sm: 400 14px/1.6 var(--font-sans); /* Texto secundário e descrição de card, em silver. */
  --text-caption: 400 13px/1.4 var(--font-sans); /* Legenda e texto de apoio em silver. Nunca em caixa alta em bloco longo. */
  --text-number: 400 22px/1.2 var(--font-mono); /* Preço e número de destaque, em white. */
  --text-label: 400 11px/1.2 var(--font-mono); /* Label, tag e numeração de seção em caixa alta, em silver. */
}
.display {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.title {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.thumb {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.subtitle {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.number {
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0.14em;
}