/* LIDA · design system mínimo do MVP
   Fonte dos valores: assets/marca/tokens.json. Regras: assets/MANUAL-DE-MARCA.md, seção 9.
   Usado por landing-page.html, lancamento.html e design-system.html (referência viva).
   Zero dependência externa: fontes self-hosted em assets/fonte/, nada de CDN.

   Ordem: 1 fontes · 2 tokens e temas · 3 base · 4 tipografia e escala no celular ·
          5 botão · 6 formulário · 7 card de oferta · 8 estados */

/* ---------- 1. Fontes ---------- */
@font-face { font-family: "LIDA Display"; src: url("../fonte/LIDADisplay-Black.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonte/Inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonte/Inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonte/Inter-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonte/JetBrainsMono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonte/JetBrainsMono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonte/JetBrainsMono-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- 2. Tokens e temas ----------
   Componentes usam só os tokens semânticos (--surface, --ink, --accent...),
   nunca as cores de marca direto. Tema Papel é o padrão; o Noite entra pela
   preferência do aparelho, por data-theme="dark" ou pela classe .t-noite
   (cenas da lancamento.html). .t-papel força o claro dentro de um trecho. */
:root {
  --brand-papel: #F1F3EE; --brand-noite: #0B120F; --brand-tinta: #101A16;
  --brand-esmeralda: #0F7A52; --brand-dourado: #B8863E; --brand-alerta: #C2412D;

  --surface: #F1F3EE; --surface-raised: #F8F9F5; --surface-tint: #E2EEE7;
  --ink: #101A16; --ink-muted: #56645D; --hairline: #D5DBD4;
  --accent: #0F7A52; --on-accent: #FFFFFF;
  --value: #8A6224; --value-fill: #B8863E;
  --urgent: #C2412D; --urgent-tint: #F6E3DE; --on-urgent: #FFFFFF;

  --font-display: "LIDA Display", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --stroke: 2px; --stroke-heavy: 8px; --stroke-chart: 5px;

  /* Escala fluida (seção 5.3): no celular de 360 px cai para o mínimo, no
     computador chega ao valor do tokens.json. */
  --fs-display: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem);   /* h1 */
  --fs-title: clamp(1.75rem, 1.4rem + 1.6vw, 2.125rem);  /* h2, 34 px */
  --fs-heading: 1.0625rem;                               /* 17 px */
  --fs-body: 1rem;                                       /* 16 px */
  --fs-small: 0.8125rem;                                 /* 13 px */
  --fs-eyebrow: 0.75rem;                                 /* 12 px */
  --fs-number-xl: clamp(2.25rem, 1.8rem + 2vw, 3rem);    /* 48 px */
  --fs-number: 1.25rem;                                  /* 20 px */
  --gutter: clamp(16px, 5vw, 56px);                      /* margem lateral, mínimo 16 px */
  --section-gap: clamp(48px, 8vw, 64px);                 /* entre seções */
  --block-pad: clamp(16px, 4vw, 24px);                   /* padding de bloco */
  --tap: 48px;                                           /* altura mínima de alvo de toque */

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0B120F; --surface-raised: #16201B; --surface-tint: #12291F;
    --ink: #F1F3EE; --ink-muted: #97A39C; --hairline: #24302A;
    --accent: #3FB383; --on-accent: #0B120F;
    --value: #B8863E; --urgent: #E5664F; --urgent-tint: #2E1612; --on-urgent: #0B120F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"], .t-noite {
  --surface: #0B120F; --surface-raised: #16201B; --surface-tint: #12291F;
  --ink: #F1F3EE; --ink-muted: #97A39C; --hairline: #24302A;
  --accent: #3FB383; --on-accent: #0B120F;
  --value: #B8863E; --urgent: #E5664F; --urgent-tint: #2E1612; --on-urgent: #0B120F;
  color-scheme: dark;
}
.t-papel {
  --surface: #F1F3EE; --surface-raised: #F8F9F5; --surface-tint: #E2EEE7;
  --ink: #101A16; --ink-muted: #56645D; --hairline: #D5DBD4;
  --accent: #0F7A52; --on-accent: #FFFFFF;
  --value: #8A6224; --urgent: #C2412D; --urgent-tint: #F6E3DE; --on-urgent: #FFFFFF;
  color-scheme: light;
}
.t-noite, .t-papel { background: var(--surface); color: var(--ink); }

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: var(--stroke) solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 4. Tipografia ----------
   Hierarquia de todo bloco: eyebrow (mono, caixa alta) -> título (LIDA Display) -> frase curta. */
.eyebrow {
  margin: 0; font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-eyebrow);
  line-height: 1.33; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
}
h1, h2, .t-display, .t-title {
  margin: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0; line-height: 1; text-wrap: balance;
}
h1, .t-display { font-size: var(--fs-display); }
h2, .t-title { font-size: var(--fs-title); }
h3, .t-heading { margin: 0; font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-heading); line-height: 1.35; text-wrap: balance; }
.t-body { font-size: var(--fs-body); line-height: 1.5; }
.t-small { font-size: var(--fs-small); line-height: 1.46; }
.muted { color: var(--ink-muted); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.t-number-xl { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-number-xl); line-height: 1.08; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.t-number { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-number); line-height: 1.3; font-variant-numeric: tabular-nums; }
.t-data { font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.46; font-variant-numeric: tabular-nums; }

/* ---------- 5. Botão (seção 9.1) ----------
   .btn--primary (Esmeralda) e .btn--secondary (contorno Tinta; .btn--ghost é o
   mesmo, nome antigo). Estados: hover, pressionado, foco, desabilitado e
   carregando (aria-busy="true": o texto troca para a ação em curso). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); padding: var(--space-3) var(--space-5);
  font: 800 0.95rem/1.25 var(--font-sans); text-decoration: none; white-space: nowrap;
  border: var(--stroke) solid transparent; border-radius: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--secondary, .btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
@media (hover: hover) {
  .btn--primary:hover { filter: brightness(1.1); }
  .btn--secondary:hover, .btn--ghost:hover { background: var(--surface-raised); }
}
.btn--primary:active { filter: brightness(0.92); }
.btn--secondary:active, .btn--ghost:active { background: var(--surface-tint); }
.btn:focus-visible { outline: var(--stroke) solid var(--accent); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; filter: none; background-clip: padding-box; }
.btn:disabled:active, .btn[aria-disabled="true"]:active { filter: none; }
/* Carregando: não apaga como o desabilitado; mostra um quadrado piscando (marcador da marca). */
.btn[aria-busy="true"] { opacity: 1; cursor: progress; filter: none; }
.btn[aria-busy="true"]::before { content: ""; width: 10px; height: 10px; flex: none; background: currentColor; }
.btn--lg { min-height: 56px; padding: var(--space-4) var(--space-5); font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn .ext { font-weight: 400; } /* seta ↗: só em link que sai da página */
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: filter .15s, background-color .15s, opacity .15s; }
  .btn[aria-busy="true"]::before { animation: lida-pisca 1s steps(2, start) infinite; }
}
@keyframes lida-pisca { to { visibility: hidden; } }

/* Fila de botões: no celular cada um ocupa a linha inteira (alvo grande, sem estourar 360 px). */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 480px) {
  .btn-row > .btn { flex: 1 1 100%; }
  .btn { white-space: normal; text-align: center; }
}

/* ---------- 6. Formulário (seção 9.2) ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field__label { font-weight: 600; color: var(--ink); line-height: 1.35; }
.field__help { margin: 0; font-size: var(--fs-small); line-height: 1.46; color: var(--ink-muted); }
.field__error { margin: 0; font-size: var(--fs-small); line-height: 1.46; color: var(--urgent); }
.field__help.is-error { color: var(--urgent); }

.input, .textarea {
  width: 100%; min-height: var(--tap); margin: 0;
  font: 400 1rem/1.4 var(--font-sans); /* 16 px: o iPhone não dá zoom */
  color: var(--ink); background: var(--surface);
  border: var(--stroke) solid var(--ink); border-radius: 0;
  padding: var(--space-3) var(--space-4);
  -webkit-appearance: none; appearance: none;
}
.textarea { background: var(--surface-raised); resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-muted); opacity: 1; }
.input:focus-visible, .textarea:focus-visible { border-color: var(--accent); outline: var(--stroke) solid var(--accent); outline-offset: 0; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--urgent); }
.input[aria-invalid="true"]:focus-visible, .textarea[aria-invalid="true"]:focus-visible { outline-color: var(--urgent); }
.input:disabled, .textarea:disabled { opacity: .4; cursor: not-allowed; }
/* Código de convite e placa: mono, caixa alta */
.input--code { font: 500 1.375rem/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.input--code::placeholder { letter-spacing: 0.12em; }
.input--mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }

/* Checkbox: quadrado 20 px, borda 2 px, marcado com preenchimento accent. */
.check {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 20px; height: 20px; margin: 2px 0 0;
  border: var(--stroke) solid var(--ink); border-radius: 0; background: var(--surface);
  cursor: pointer;
}
.check:checked { padding: 3px; background: var(--accent); background-clip: content-box; border-color: var(--accent); }
.check:focus-visible { outline: var(--stroke) solid var(--accent); outline-offset: 2px; }
.check:disabled { opacity: .4; cursor: not-allowed; }

/* Opção escolhível (checkbox dentro de um bloco clicável inteiro) */
.choice-list { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.choice {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); align-items: start;
  padding: var(--space-4); border: var(--stroke) solid var(--hairline); background: var(--surface);
  cursor: pointer;
}
@media (hover: hover) { .choice:hover { border-color: var(--ink); } }
.choice:has(.check:checked) { border-color: var(--ink); background: var(--surface-tint); }
.choice:has(.check:focus-visible) { outline: var(--stroke) solid var(--accent); outline-offset: 2px; }
.choice:has(.check:focus-visible) .check { outline: 0; }
.choice__title { display: block; font-weight: 800; line-height: 1.35; }
.choice__desc { display: block; margin-top: 2px; font-size: 0.875rem; line-height: 1.45; color: var(--ink-muted); }

/* ---------- 7. Card de oferta (seção 9.3) ----------
   Ordem fixa: eyebrow -> título curto -> preço (Tinta, nunca Dourado) ->
   o que inclui -> tempo parado -> botão primário. */
.offer {
  display: flex; flex-direction: column; gap: var(--space-4); min-width: 0;
  padding: var(--block-pad); background: var(--surface-raised);
  border: var(--stroke) solid var(--ink); border-radius: 0;
}
.offer__head { display: flex; flex-direction: column; gap: var(--space-2); }
.offer__title { font-size: var(--fs-title); }
.offer__price {
  margin: 0; color: var(--ink);
  border-top: var(--stroke-heavy) solid var(--ink); padding-top: var(--space-3);
}
.offer__price small { display: block; margin-top: var(--space-1); font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 400; letter-spacing: 0; color: var(--ink-muted); }
.offer__includes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-body); line-height: 1.5; }
.offer__includes li { display: grid; grid-template-columns: 12px 1fr; gap: var(--space-3); align-items: baseline; }
.offer__includes li::before { content: ""; width: 8px; height: 8px; background: var(--ink); transform: translateY(-1px); }
.offer__time { margin: 0; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-muted); padding-top: var(--space-3); border-top: var(--stroke) solid var(--hairline); }
.offer .btn { margin-top: var(--space-1); }

/* ---------- 8. Estados (seção 8): palavra + quadrado de 12 px, nunca só cor ---------- */
.tag { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); font-weight: 800; line-height: 1.3; white-space: nowrap; }
.tag::before { content: ""; width: 12px; height: 12px; flex: none; }
.tag--ok { color: var(--accent); }
.tag--ok::before { background: var(--accent); }
.tag--watch { color: var(--ink); }
.tag--watch::before { border: var(--stroke) solid var(--ink); background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.tag--urgent { color: var(--urgent); }
.tag--urgent::before { background: var(--urgent); }