:root, [data-theme="claro"] {
  --carvao: #171411;
  --osso: #EEE7D9;
  --marfim: #F4F1EB;
  --brasa: #D9471B;
  --brasa-forte: #CF3B1A;
  --brasa-escura: #8A3A1C;
  --brasa-profunda: #5E2712;
  --brasa-clara: #F0764F;
  --aco-100: #DFD8CA;
  --aco-200: #CBC3B6;
  --aco-300: #A79F92;
  --aco-400: #827A70;
  --aco-500: #6B6257;
  --aco-700: #3A342E;
  --aco-800: #2B2521;
  --aco-900: #221D19;
  --fundo: var(--marfim);
  --superficie: var(--osso);
  --superficie-alta: #FFFFFF;
  --destaque: var(--carvao);
  --texto: var(--carvao);
  --texto-secundario: var(--aco-700);
  --texto-suave: var(--aco-500);
  --brasa-texto: var(--brasa-escura);
  --brasa-texto-hover: var(--brasa-profunda);
  --acao: var(--carvao);
  --acao-hover: var(--aco-700);
  --acao-texto: var(--osso);
  --brasa-acao: var(--brasa-forte);
  --brasa-acao-hover: #BD3311;
  --brasa-acao-texto: #FFFFFF;
  --borda: var(--aco-200);
  --borda-controle: var(--aco-400);
  --trilha: var(--aco-100);
  --foco: var(--brasa);
  --erro: #A92227;
  --sombra-1: 0 8px 24px #1714111f, 0 1px 2px #1714111a;
  --sombra-2: 0 16px 48px #17141129, 0 2px 6px #1714111a;
}
[data-theme="escuro"] {
  --fundo: var(--carvao);
  --superficie: var(--aco-900);
  --superficie-alta: var(--aco-800);
  --destaque: var(--aco-900);
  --texto: var(--osso);
  --texto-secundario: var(--aco-200);
  --texto-suave: var(--aco-300);
  --brasa-texto: var(--brasa-clara);
  --brasa-texto-hover: #F98662;
  --acao: var(--osso);
  --acao-hover: var(--marfim);
  --acao-texto: var(--carvao);
  --brasa-acao: var(--brasa-forte);
  --borda: var(--aco-700);
  --borda-controle: var(--aco-400);
  --trilha: var(--aco-800);
  --foco: var(--brasa);
  --erro: #ED8A8E;
  --sombra-1: 0 8px 24px #00000080, 0 0 0 1px #3A342E;
  --sombra-2: 0 16px 48px #000000a3, 0 0 0 1px #3A342E;
}
:root {
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 20px;
  --espaco-6: 24px;
  --espaco-8: 32px;
  --espaco-12: 48px;
  --espaco-16: 64px;
  --canto-0: 0px;
  --canto-1: 2px;
  --canto-2: 6px;
  --canto-total: 999px;
  --alvo-minimo: 44px;
  --alvo-compacto: 36px;
  --icone: 20px;
  --icone-grande: 24px;
  --linha: 1px;
  --foco-espessura: 2px;
  --foco-afastamento: 2px;
  --barra: 8px;
  --medida-leitura: 68ch;
  --font-titulo: Texturina, Georgia, serif;
  --font-texto: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-rotulo: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
.display { font-family: var(--font-titulo); font-size: 48px; line-height: 52px; font-weight: 800; }
.titulo-1 { font-family: var(--font-titulo); font-size: 36px; line-height: 42px; font-weight: 800; }
.titulo-2 { font-family: var(--font-titulo); font-size: 28px; line-height: 34px; font-weight: 700; }
.titulo-3 { font-family: var(--font-titulo); font-size: 22px; line-height: 28px; font-weight: 700; }
.titulo-4 { font-family: var(--font-titulo); font-size: 18px; line-height: 24px; font-weight: 700; }
.numero { font-family: var(--font-titulo); font-size: 48px; line-height: 48px; font-weight: 800; }
.corpo-leitura { font-family: var(--font-texto); font-size: 18px; line-height: 28px; font-weight: 400; }
.corpo { font-family: var(--font-texto); font-size: 16px; line-height: 24px; font-weight: 400; }
.corpo-forte { font-family: var(--font-texto); font-size: 16px; line-height: 24px; font-weight: 600; }
.legenda { font-family: var(--font-texto); font-size: 14px; line-height: 20px; font-weight: 400; }
.legenda-curta { font-family: var(--font-texto); font-size: 12px; line-height: 16px; font-weight: 600; }
.rotulo { font-family: var(--font-rotulo); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.12em; }
.botao { font-family: var(--font-texto); font-size: 16px; line-height: 20px; font-weight: 600; }
.botao-pequeno { font-family: var(--font-texto); font-size: 14px; line-height: 18px; font-weight: 600; }
@font-face { font-family: 'Texturina'; src: url('fonts/texturina-latin-opsz-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }