/* luzz. — generated from tokens.json */
:root, [data-theme="dia"] {
  --brand-noite: #1c1f3a; /* Azul-noite da marca, igual nos dois temas. Vagalume e wordmark no claro; fundo do ícone do app. */
  --brand-chama: #f2a33a; /* Âmbar da marca, igual nos dois temas. O ponto do "luzz.", a barriga do vagalume, o botão primário. */
  --brand-brilho: #ffd98a; /* Amarelo-luz da marca. Barriga do vagalume sobre fundo escuro, referências bíblicas sobre surface-deep. */
  --brand-brasa: #e8704a; /* Laranja-brasa da marca, só como preenchimento (chama do streak, ícones grandes). Para texto use brasa. */
  --brand-pergaminho: #fbf7ef; /* Creme da marca. Texto sobre Noite; fundo das telas no tema Dia. */
  --surface: #fbf7ef; /* Fundo da página e das telas do app. */
  --surface-raised: #ffffff; /* Cartões, campos, linhas de toque (TouchRow), barra de abas e a AppBar clara. */
  --surface-deep: #1c1f3a; /* Superfície escura dentro da tela: VerseCard, Widget, PlanCard, AppBar escura. No tema Noite leva borda line-on-deep. */
  --surface-chama: #fdebcf; /* Fundo tingido de âmbar atrás de texto ink (chips, destaques). Nunca com texto chama por cima. */
  --line: #e3dccb; /* Fios e bordas decorativas: divisores do FaqItem, borda de 2px dos campos em repouso. */
  --line-strong: #8c8779; /* Marcas que carregam significado e precisam de 3:1: o anel do toque ainda não feito, o ponto do dia que falta. */
  --line-on-deep: #fbf7ef29; /* Fio sobre surface-deep (divisor dentro do PlanCard; borda do VerseCard no tema Noite). */
  --ink: #1c1f3a; /* Texto principal e ícones em surface e surface-raised (15:1 no Dia, 17:1 na Noite). */
  --ink-soft: #3f4260; /* Texto corrido secundário e respostas do FAQ em surface e surface-raised (9:1 / 12:1). */
  --ink-muted: #5e6178; /* Legendas, placeholders, metadados e aba inativa, em surface e surface-raised (5,7:1 / 6,8:1). */
  --on-deep: #fbf7ef; /* Texto principal sobre surface-deep nos dois temas (15:1 / 18:1). */
  --on-deep-muted: #c9cbdb; /* Texto secundário e letras miúdas sobre surface-deep (10:1 / 9,9:1). */
  --chama: #f2a33a; /* Ação primária (fundo do botão), toque concluído, pontos da sequência, ponto do wordmark. Como texto, só sobre surface-deep (7,7:1); sobre surface do Dia falha (2:1). */
  --chama-hover: #e2932a; /* Botão primário em hover e pressionado. */
  --on-chama: #1c1f3a; /* Texto e ícone sobre um preenchimento chama (rótulo do botão primário, check do toque feito): 7,7:1. */
  --brilho: #ffd98a; /* Referência bíblica, eyebrow e número do streak sobre surface-deep (12:1); anel de foco sobre surface-deep no Dia. */
  --brasa: #b8451c; /* Destaque de urgência como texto em surface e surface-raised: eyebrow "Lista de espera aberta", "Dia 5 de 7", chama do streak na AppBar clara (5:1 / 5,9:1). */
  --erro: #b42318; /* Mensagem de erro e borda do campo inválido, em surface e surface-raised (6,2:1 / 7,9:1). */
  --erro-soft: #fde8e6; /* Fundo tingido atrás de texto erro. */
  --link: var(--ink); /* Links no texto corrido: cor de ink com sublinhado; o âmbar nunca sublinha texto. */
  --focus-ring: #1c1f3a; /* Anel de foco do teclado: 2px de surface e depois 2px de focus-ring. Sobre surface-deep no tema Dia use brilho. */
  --scrim: #1c1f3a99; /* Véu atrás de folhas (sheet) e diálogos. */
  --shadow-sheet: 0 -8px 32px #1c1f3a2e; /* Só na folha (sheet) que sobe do rodapé: paywall, seletor de horário. */
  --shadow-glow: none; /* Halo da barriga do vagalume e do ponto do wordmark no tema Noite; nulo no Dia. */
}
[data-theme="noite"] {
  --surface: #11142a;
  --surface-raised: #1c1f3a;
  --surface-deep: #090b1a;
  --surface-chama: #3a2b12;
  --line: #2a2e4d;
  --line-strong: #6b7199;
  --line-on-deep: #2a2e4d;
  --ink: #fbf7ef;
  --ink-soft: #d6d8e6;
  --ink-muted: #a3a7c2;
  --on-deep-muted: #b4b7cc;
  --chama-hover: #ffb24d;
  --brasa: #e8704a;
  --erro: #ff8a7a;
  --erro-soft: #3b1512;
  --link: var(--ink);
  --focus-ring: #ffd98a;
  --scrim: #000000a6;
  --shadow-sheet: 0 -8px 32px #00000080;
  --shadow-glow: 0 0 24px #ffd98a59;
}
:root {
  --space-1: 4px; /* Entre ícone e texto em chips; entre o número e a palavra "dias". */
  --space-2: 8px; /* Entre linhas de uma lista compacta; gap dos pontos da sequência (6px arredonda aqui). */
  --space-3: 12px; /* Gap entre ícone e rótulo em TouchRow e TabBar; padding vertical de TouchRow. */
  --space-4: 16px; /* Padding horizontal de campos, botões e AppBar; gutter lateral mínimo no celular. */
  --space-5: 20px; /* Gutter lateral das telas do app e da landing no celular; padding do VerseCard. */
  --space-6: 24px; /* Padding de cartões (surface-raised); gap entre cartão e texto. */
  --space-7: 28px; /* Padding do PlanCard; gap do grid de ícones. */
  --space-8: 32px; /* Entre blocos dentro de uma seção. */
  --space-9: 40px; /* Entre seções no celular. */
  --space-12: 48px; /* Padding interno de uma folha (sheet) no topo. */
  --space-16: 64px; /* Entre seções em desktop. */
  --space-20: 80px; /* Gutter lateral da landing em desktop. */
  --radius-xs: 8px; /* Chips e badges. */
  --radius-sm: 12px; /* Campos de texto, TouchRow, botão md, ícone da TabBar. */
  --radius-md: 16px; /* Botão lg, VerseCard, Widget, ícones em tiles de 44px. */
  --radius-lg: 24px; /* Cartões em surface-raised. */
  --radius-xl: 28px; /* PlanCard, painéis escuros e folhas (sheet) no topo. */
  --radius-full: 999px; /* Pontos da sequência, anel do toque, pílulas e avatares. */
  --control-md: 48px; /* Botão md, campo md, TouchRow. */
  --control-lg: 56px; /* Botão lg e campo lg (CTA da landing); altura da AppBar. */
  --touch-min: 44px; /* Alvo de toque mínimo (ícones em tiles, pontos da sequência com área estendida). */
  --icon: 24px; /* Ícones de interface (traço 2px). */
  --icon-sm: 18px; /* Ícone dentro de chip e de contador. */
  --tab-bar: 64px; /* Altura da TabBar, mais a safe-area inferior. */
  --dot: 22px; /* Diâmetro dos pontos da sequência (StreakDots). */
  --measure: 560px; /* Largura máxima do texto corrido em desktop (cerca de 65 caracteres em body). */
  --duration-fast: 120ms; /* Hover e pressed. */
  --duration-base: 200ms; /* Marcar um toque, abrir o FaqItem, trocar de aba. */
  --duration-slow: 360ms; /* Folha subindo; o ponto do dia acendendo ao completar o devocional. */
  --easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1); /* Tudo que entra ou muda de estado. */
  --opacity-disabled: 0.45; /* Botões e campos desabilitados. */
  --opacity-pressed: 0.85; /* Botão secundário e quiet ao pressionar (o primário escurece para chama-hover). */
  --font-sans: "Nunito", "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Outfit", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-wordmark: 900 28px/1 var(--font-sans); /* Só para o nome da marca (componente Logo). Escale proporcionalmente; nunca em outra fonte ou peso. */
  --text-display: 700 64px/1.05 var(--font-display); /* Hero da landing em desktop. O ponto final em chama. */
  --text-h1: 700 38px/1.1 var(--font-display); /* Hero da landing no celular; título de tela de boas-vindas no app. */
  --text-h2: 700 26px/1.2 var(--font-display); /* Seções da landing; título do PlanCard; título de tela no app. */
  --text-h3: 700 22px/1.25 var(--font-display); /* Título de cartão. */
  --text-h4: 700 18px/1.3 var(--font-display); /* Título de bloco dentro de uma tela; título da AppBar em telas internas. */
  --text-price: 700 40px/1.1 var(--font-display); /* O preço no PlanCard. Algarismos tabulares. */
  --text-lead: 400 20px/1.5 var(--font-sans); /* Subtítulo do hero em desktop. */
  --text-body: 400 17px/1.5 var(--font-sans); /* Texto corrido na landing e no app. */
  --text-verse: 600 18px/1.55 var(--font-sans); /* O versículo no VerseCard, em on-deep. Nunca itálico. */
  --text-body-sm: 400 14px/1.45 var(--font-sans); /* Descrições curtas, respostas do FAQ (em ink-soft), texto do Widget. */
  --text-label: 800 16px/1.3 var(--font-sans); /* Rótulo de TouchRow, nome de item, botão pequeno. */
  --text-button: 800 17px/1.2 var(--font-sans); /* Rótulo dos botões (Button md e lg). */
  --text-caption: 400 13px/1.45 var(--font-sans); /* Legendas e letras miúdas, em ink-muted ou on-deep-muted. */
  --text-eyebrow: 800 12px/1.3 var(--font-sans); /* Rótulo em caixa alta acima de um título ou versículo (componente Eyebrow): brasa sobre claro, brilho sobre surface-deep. */
  --text-tab: 800 11px/1.2 var(--font-sans); /* Rótulo das abas da TabBar. */
  --text-counter: 800 16px/1.2 var(--font-sans); /* Contador do streak. Algarismos tabulares. */
}
.wordmark {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.display {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.h1 {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.h2 {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.h3 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.h4 {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
}
.price {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
}
.lead {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.verse {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0;
}
.button {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.tab {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0;
}
.counter {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}