/* ==========================================================================
   DO BIT AO CAMPO — tokens e base
   Os mesmos valores do livro (manual/css/manual.css) e dos slides das aulas
   (curso/04_producao/tools/animar.py: CSS_TEMA, CSS_COR, CSS_FUNDO, CSS_CAPA):
   carvão #1F2937, ardósia da capa #1E2938, azul-aço #2F5D8A / #4F7FAE,
   azul-acinzentado #52677D, superfícies #F8FAFC → #EEF2F6, linhas #CBD5E1,
   cantos de 4 px e as quatro cores de campo dos quadros didáticos.
   ========================================================================== */

:root {
  /* Escuros: capa do livro e abertura das aulas */
  --noite: #101B2C;
  --noite-2: #172941;
  --noite-3: #22395A;
  --ardosia: #1E2938;
  --carvao: #1F2937;
  --fio-escuro: #3B4A5E;

  /* Claros: fundo dos slides e papel do livro */
  --papel: #FFFFFF;
  --gelo: #F8FAFC;
  --gelo-2: #EEF2F6;
  --painel: #F5F8FB;
  --suave: #F1F5F9;
  --linha-clara: #E2E8F0;
  --linha-faixa: #D5DDE6;
  --linha: #CBD5E1;

  /* Texto */
  --texto: #334155;
  --ardosia-texto: #475569;
  --cinza: #64748B;
  --cinza-claro: #94A3B8;
  --azul-cinza: #52677D;

  /* Azul-aço, a cor de apoio dos slides */
  --azul: #2F5D8A;
  --azul-escuro: #1E3A5F;
  --azul-claro: #4F7FAE;
  --azul-luz: #A9D0F5;
  --azul-tinta: #EAF1F8;
  --azul-borda: #C9D8E8;

  /* Cores de campo dos quadros didáticos (bytes do identificador, partes do livro, temas das notas) */
  --c-azul: #2F5D8A;   --c-azul-f: #EAF1F8;   --c-azul-t: #1E3A5F;
  --c-ambar: #B7791F;  --c-ambar-f: #FBF1DF;  --c-ambar-t: #6B4510;
  --c-verde: #2F855A;  --c-verde-f: #E7F3EC;  --c-verde-t: #1F5C3E;
  --c-rosa: #A23E62;   --c-rosa-f: #F8E8EE;   --c-rosa-t: #6E1F3D;

  /* Tipografia (as fontes do livro: Segoe UI e Consolas) */
  --fonte: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: Consolas, "Cascadia Mono", "SF Mono", Menlo, "Liberation Mono", monospace;

  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-titulo: clamp(1.8rem, 1.25rem + 1.7vw, 2.6rem);
  --t-capa: clamp(2.2rem, 1.3rem + 2.9vw, 3.75rem);

  /* Medidas */
  --largura: 1180px;
  --margem: clamp(16px, 4vw, 40px);
  --secao: clamp(64px, 8vw, 112px);
  --topo-h: 68px;
  --raio: 4px;
  --raio-p: 2px;

  --sombra-1: 0 1px 2px rgba(15, 23, 42, 0.05);
  --sombra-2: 0 6px 18px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.05);
  --sombra-3: 0 18px 40px rgba(15, 23, 42, 0.12), 0 3px 8px rgba(15, 23, 42, 0.05);
  --sombra-livro: 0 26px 56px rgba(15, 23, 42, 0.30), 0 6px 16px rgba(15, 23, 42, 0.16);

  /* Movimento: a curva das animações das aulas (easeInOutCubic) */
  --curva: cubic-bezier(0.65, 0, 0.35, 1);
  --curva-saida: cubic-bezier(0.22, 1, 0.36, 1);
  --rapido: 160ms;
  --medio: 260ms;
}

/* Cores de campo por classe (como .c-azul, .c-ambar... nos slides) */
.c-azul  { --cb: var(--c-azul);  --cf: var(--c-azul-f);  --ct: var(--c-azul-t); }
.c-ambar { --cb: var(--c-ambar); --cf: var(--c-ambar-f); --ct: var(--c-ambar-t); }
.c-verde { --cb: var(--c-verde); --cf: var(--c-verde-f); --ct: var(--c-verde-t); }
.c-rosa  { --cb: var(--c-rosa);  --cf: var(--c-rosa-f);  --ct: var(--c-rosa-t); }

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--gelo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  color: var(--carvao);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

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

code, pre { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; }

a {
  color: var(--azul);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--azul-escuro); }

:focus-visible {
  outline: 2px solid var(--azul-claro);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pular {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--carvao);
  color: var(--papel);
  font-weight: 600;
  font-size: var(--t-sm);
  text-decoration: none;
  border-radius: var(--raio);
}
.pular:focus { top: 12px; color: var(--papel); }

.caixa {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--margem);
}

.simbolos {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Rótulo em caixa alta, como o cabeçalho corrido do livro e dos slides */
.kicker {
  margin: 0 0 0.55rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cinza);
}

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