/* ============================================================
   a11y.css — Acessibilidade tipográfica
   ============================================================
   Override global de pesos, tamanhos e contrastes para melhorar
   legibilidade pra pacientes com miopia, astigmatismo, présbita
   e outras condições visuais.

   Critério WCAG 2.1 AA:
   - Contraste mínimo 4.5:1 pra texto normal
   - Contraste mínimo 3:1 pra texto large (≥18pt ou 14pt bold)
   - Texto redimensionável até 200% sem perda de função

   Carregar APÓS os outros CSS (a sobrescrever vence).
   ============================================================ */

/* ── 1. Pesos mínimos no corpo do texto ────────────────────── */
/* Cormorant Garamond pode ficar 400 (era 300) - ainda elegante,
   mais legível. Manter 300 só em headlines >= 1.5rem. */
body, p, li, td, th, span, a, label, button, input, textarea, select {
  font-weight: 400;
}

/* Texto longo em parágrafo - garantir min 400 */
p, li {
  font-weight: 400;
  line-height: 1.6;
}

/* Cormorant Garamond grandes podem manter peso leve elegante */
h1, .resumo-title, .ci-title {
  font-weight: 400 !important;
}
h1[style*="font-weight:300"], h1[style*="font-weight: 300"] {
  font-weight: 400 !important;
}
/* Cormorant Garamond menores (<= 1.4rem): força peso 400+ */
h2, h3, h4, h5, h6,
.section-title, .sec-title, .sub-title,
.meal-card h3, .alimento-nome, .resumo-section-title,
.resumo-greeting, .resumo-score-title, .checkin-title {
  font-weight: 400 !important;
}

/* ── 2. Tamanhos mínimos legíveis ──────────────────────────── */
/* Texto muito pequeno (< 0.7rem) pode ficar ilegível. Force min 12px
   em qualquer texto de conteúdo (não em uppercase labels decorativos). */
p, li, .pro-form-hint, .form-hint,
.alimento-qty, .qty, .meal-kcal-badge,
.macro-pill, .resumo-score-desc, .rm-sub,
.resumo-dica-texto, .alert {
  font-size: 0.85rem !important;  /* ~13.6px */
  line-height: 1.55 !important;
}

/* Labels uppercase com letterspacing podem ficar pequenos */
.form-label, .meal-tipo-icon-label, .resumo-score-title,
.rm-label, .checkin-section-title,
[class*="label"][class*="upper"] {
  font-size: 0.78rem !important;  /* ~12.5px */
  letter-spacing: 0.08em !important;  /* reduz spacing exagerado */
}

/* ── 3. Cores com contraste melhor ─────────────────────────── */
/* Substitui cinza-claro por tom mais escuro pra contraste WCAG AA.
   Mantém aspecto suave mas legível. */
:root {
  --textl: #5A5448;       /* era #6B6659 - escurecido +20% */
  --text-light: #5A5448;
  --subtitle: #6B5E4A;    /* era similar - escurecido pra contraste */
  --sub: #6B5E4A;
}

/* Texto cinza-claro inline-styled (precisa de !important pra vencer) */
[style*="color:var(--textl)"], [style*="color: var(--textl)"],
[style*="color:var(--text-light)"], [style*="color: var(--text-light)"] {
  color: #5A5448 !important;
}
[style*="color:var(--subtitle)"], [style*="color: var(--subtitle)"],
[style*="color:var(--sub)"], [style*="color: var(--sub)"] {
  color: #6B5E4A !important;
}

/* ── 4. Itálico em descrições - peso compensador ───────────── */
/* Itálico em fonte clara fica ainda mais difícil de ler.
   Compensa com peso 500 quando estiver <= 0.85rem em itálico. */
p[style*="font-style:italic"],
em, i, [class*="hint"][style*="italic"] {
  font-weight: 500;
}

/* ── 5. Bordas e hover de campos de input ──────────────────── */
/* Inputs pequenos com borda sutil podem confundir. Engrossa um pouco. */
.form-input, input, textarea, select {
  font-size: 0.95rem !important;  /* mantém input igual ou maior que body */
  font-weight: 400 !important;
}

/* ── 6. Modo alta legibilidade (toggle opcional) ───────────── */
/* Quando body tem class "modo-a11y", força tudo ainda maior e mais bold.
   Toggle a ser implementado via botão flutuante. */
body.modo-a11y {
  font-size: 1.05rem;
}
body.modo-a11y p,
body.modo-a11y li,
body.modo-a11y .alimento-nome,
body.modo-a11y .alimento-qty {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  font-weight: 500 !important;
}
body.modo-a11y h1, body.modo-a11y h2, body.modo-a11y h3 {
  font-weight: 500 !important;
}
body.modo-a11y .alert,
body.modo-a11y .form-hint {
  font-size: 0.95rem !important;
}

/* ── 7. Foco mais visível ──────────────────────────────────── */
*:focus-visible {
  outline: 2px solid #2D6A56 !important;
  outline-offset: 2px;
}

/* ── 8. Reduce motion (opcional, respeita preferência do usuário) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 9. Zoom até 200% sem quebrar layout ───────────────────── */
/* Garantir que main containers permitam zoom */
.resumo-main, .pro-modal, .meal-card, .alimento-card {
  max-width: 100% !important;
}

/* ── 10. Botão de tamanho de fonte (A-/A/A+) ──────────────── */
.a11y-toggle {
  position: fixed;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0));
  z-index: 9000;
  display: flex;
  flex-direction: column;
  background: rgba(45, 106, 86, 0.92);
  color: #fff;
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  user-select: none;
}
.a11y-toggle button {
  background: none;
  border: 0;
  color: #fff;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: background 0.15s;
}
.a11y-toggle button:hover {
  background: rgba(255, 255, 255, 0.15);
}
.a11y-toggle button.active {
  background: #fff;
  color: #2D6A56;
}
/* Em telas pequenas, deixa só A+ visível e expande no toque */
@media (max-width: 480px) {
  .a11y-toggle {
    flex-direction: row;
    bottom: calc(82px + env(safe-area-inset-bottom, 0));  /* acima da bottom-nav */
  }
  .a11y-toggle button { width: 30px; height: 30px; font-size: 0.82rem; }
}

/* Esconde quando estiver imprimindo */
@media print { .a11y-toggle { display: none !important; } }