/* Vita Health — identidade visual do site da marca, tema claro.
   Verde floresta #184828 (botões, títulos da marca), dourado #B88820
   (detalhes), fundo #FBFBFA com cartões brancos, texto #14181A,
   Montserrat no texto, Playfair Display no nome da marca, cantos de 6–10px.

   As cores principais (primária, destaque e fundo) vêm da marca, não daqui;
   esta folha só ajusta o que elas não alcançam. Todo contraste de texto
   foi medido e passa no WCAG AA (4,5:1); o mais baixo é o texto
   secundário, 5,4:1. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

/* O !important é necessário: o aplicativo define estas variáveis no
   atributo style do <html>, que vence uma folha de estilo comum. */
:root {
  --surface: #fbfbfa !important;
  --surface-raised: #ffffff !important;
  --border: #e4e6e4 !important;
  --text: #14181a !important;
  --text-muted: #5d666a !important;
  --danger: #b42318 !important;
  --success: #1e7a43 !important;

  /* Usados só por esta folha. */
  --vita-green-dark: #0f3a1e;
  --vita-green-soft: #e9f0eb;
  --vita-gold: #b88820;
  --vita-gold-soft: #f7f1de;
  --vita-border-strong: #cfd3cf;
  /* Borda de campo de formulário: 3,2:1 sobre o branco, o mínimo para um
     controle ser visto como tal. */
  --vita-field-border: #8a938d;
  --vita-shadow: 0 1px 2px rgba(20, 24, 26, 0.04), 0 8px 24px -12px rgba(20, 24, 26, 0.12);

  color-scheme: light;
  accent-color: #184828;
}

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--vita-green-soft);
  color: var(--text);
}

/* Títulos como no site: Montserrat seminegrito, espaçamento justo.
   A loja (.sf) tem tipografia própria e fica de fora de todas as regras
   de componente abaixo. */
:is(h1, h2, h3, h4):not(.sf *) {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Cabeçalho: faixa verde no topo e vidro fosco, como o do site. */
[data-nav-layout] > header,
[data-nav-layout] > div > header {
  border-top: 3px solid var(--brand-primary);
  background-color: rgba(255, 255, 255, 0.92);
}

/* O logotipo tem o símbolo sobre o nome; na altura padrão do cabeçalho
   o nome ficaria ilegível. */
[data-nav-layout] header a > img {
  height: 2.5rem;
  max-width: 9rem;
}

@media (max-width: 639px) {
  [data-nav-layout] header a > img {
    height: 2.125rem;
    max-width: 7rem;
  }
}

/* Nome da marca quando não há logotipo: a serifa do site. Não o item do
   menu em que se está, que também é font-semibold e marca aria-current. */
[data-nav-layout] header a.font-semibold:not([aria-current]),
main h1.text-center:not(:has(img)) {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Telas públicas (entrada, cadastro, consulta do pedido): o fundo
   esverdeado e dourado da capa do site, com o formulário num cartão. */
main.min-h-screen.place-items-center {
  background:
    radial-gradient(110% 80% at 85% 0%, var(--vita-gold-soft) 0%, transparent 55%),
    linear-gradient(160deg, var(--vita-green-soft) 0%, var(--surface) 60%);
}

main.min-h-screen.place-items-center > form {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--vita-shadow);
  padding: 2rem 1.75rem;
}

@media (max-width: 479px) {
  main.min-h-screen.place-items-center > form {
    padding: 1.5rem 1.25rem;
  }
}

main h1.text-center > img {
  height: 4.5rem;
  max-width: 13rem;
}

/* Botões na cor da marca: escurecem ao passar o mouse, como no site.
   O rótulo continua branco: 12,8:1 no verde escuro. */
:is(a, button)[class*='bg-[var(--brand-primary)]']:not(.sf *) {
  font-weight: 600;
  transition: background-color 0.15s, transform 0.06s;
}

:is(a, button)[class*='bg-[var(--brand-primary)]']:not(.sf *):hover:not(:disabled) {
  background-color: var(--vita-green-dark);
}

:is(a, button)[class*='bg-[var(--brand-primary)]']:not(.sf *):active:not(:disabled) {
  transform: translateY(1px);
}

/* Botões de contorno: borda mais firme, como o botão fantasma do site. */
:is(a, button, summary)[class*='border-[var(--border)]']:not(.sf *) {
  border-color: var(--vita-border-strong);
}

/* Campos de formulário. */
:is(input:not([type='checkbox'], [type='radio'], [type='file'], [type='color'], [type='range']), select, textarea):not(.sf *) {
  border-color: var(--vita-field-border);
  background-color: #ffffff;
}

:is(input, select, textarea):not(.sf *):focus {
  border-color: var(--brand-primary);
  outline: 2px solid var(--brand-primary);
  outline-offset: 1px;
}

/* Cartões: branco sobre o fundo levemente quente, com sombra suave. */
[class*='rounded-xl'][class*='bg-[var(--surface-raised)]']:not(.sf *) {
  box-shadow: var(--vita-shadow);
}

/* Tabelas: cabeçalho no verde muito claro do site. */
thead th:not(.sf *) {
  background-color: #f3f6f4;
  color: var(--text-muted);
  font-weight: 600;
}

/* Links de conteúdo em verde, sublinhados com folga. Só os que já se
   apresentam como link: os itens do menu e os botões ficam como estão. */
main a:is([class~='underline'], [class~='hover:underline']):not(.sf *) {
  color: var(--brand-primary);
  text-underline-offset: 3px;
}

main a:is([class~='underline'], [class~='hover:underline']):not(.sf *):hover {
  color: var(--vita-green-dark);
}