/* WCAG AA overrides - aplicado em todas as paginas via layout.tsx */

:root {
  --color-accent-on-light: #007A5E;   /* ratio ~5.1:1 vs branco */
  --color-warning-on-dark-text: #FBC678;  /* amarelo claro pra texto sobre dark */
  --color-text-on-dark: #F8F9FA;
  --color-text-muted-on-light: #475569;  /* slate-600 ratio 7:1 */
}

/* Section tags / hero badges / category labels - texto colored sobre clear bg */
.section-tag,
.hero-badge .badge-text,
.hero-badge-animated .badge-text,
.highlight-text,
.gokyo-nome-japones,
.title-japones,
.categoria-traducao {
  color: var(--color-accent-on-light) !important;
}

/* Quando esses elementos tem bg colored solido (verde/amarelo/roxo), usar texto dark */
.hero-badge,
.hero-badge-animated,
.gokyo-badge,
.badge-kanji,
.kanji-char,
.nivel-badge {
  color: #1A2332 !important;
}

/* Section titles em background dark precisam de texto claro */
section[class*="dark"] .section-title,
.dark-section .section-title,
.cta-section .section-title,
.cta-content h2,
.cta-content p,
.bg-dark .section-title {
  color: var(--color-text-on-dark) !important;
}

.cta-content p,
section[class*="dark"] p:not(.lead) {
  color: #CBD5E0 !important;
}

/* CTAs branco-sobre-verde quebram WCAG. Force dark text. */
.btn-gokyo,
.featured-btn,
.btn-pricing,
.btn-checkout,
.btn-contact {
  color: #1A2332 !important;
}

.btn-checkout.featured-btn {
  color: #FFFFFF !important;
  background: #1A2332 !important;
}

/* Toggle discount e pricing badges no dark area */
.toggle-discount,
.pricing-badge {
  color: #FFB800 !important;
  background: rgba(255, 184, 0, 0.12) !important;
}

/* Subcategoria items azul Bootstrap em card escuro - clarear */
.subcategoria-item,
.tecnica-card,
.gokyo-card a {
  color: #93C5FD !important; /* blue-300 ~7:1 vs dark */
}

/* Gokyo cards links/buttons que tem "VER TODAS" */
.subcategoria-item.ver-todas {
  color: #FFFFFF !important;
  background: #1A2332 !important;
}

/* Cards de Gokyo com fundo claro - paragrafo descritivo */
.gokyo-card p,
.tecnica-card .descricao,
.card-descricao {
  color: var(--color-text-muted-on-light) !important;
}

/* Stat values/labels em cards claros */
.stat-value,
.stat-label {
  color: #1A2332 !important;
}

/* Voltar para tecnicas nav link */
.nav-link.nav-center,
a.nav-link {
  color: #1A2332 !important;
}

/* Section labels coloridos sobre escuro - clarear */
.section-label,
.eyebrow,
.category-label {
  color: #C77ED4 !important; /* purple-300 */
}

/* Kanji invisivel */
.badge-kanji,
.kanji-char,
.hero-kanji {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ============================================================
   SURGICAL FIXES - WCAG AA compliance pass
   ============================================================ */

/* Fix 1: NAVEGUE + A PRIMEIRA PLATAFORMA - qualify as large text (3:1 threshold)
   Atual ratio 4.06 com #008B6E sobre rgb(9,29,31). Aumentando peso e tamanho
   passa pelo threshold de "large text" (>=18.66px bold) que exige apenas 3:1. */
.section-tag,
.hero-badge-animated .badge-text {
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 0.08em !important;
}

/* Fix 2: /sobre section-titles invisivel (1.18) - seletor mais amplo
   Paginas sem class ancestral "*dark*" nao pegavam o override anterior. */
.sobre-page .section-title,
.sobre-section .section-title,
.home-page .section-title,
.historia-page .section-title,
.tecnicas-page .section-title {
  color: #F8F9FA !important;
}

/* NOTA: Removida regra global `body { color: rgba(255,255,255,0.92) }`.
   Ela funcionava como "solo dark substrate" mas vazava branco para QUALQUER
   texto sem cor explicita - inclusive .info-value, .text-content, dt/dd,
   botoes Tailwind 'text-white' sem fundo, etc - tornando-os invisiveis em
   cards de fundo claro. Substituida por regras escopadas por componente. */

/* Fix 3: btn-contact 'Entre em contato' - reverter regressao de cor escura
   Bg eh dark, texto precisa ser branco com pill verde-claro. */
.btn-contact {
  color: #FFFFFF !important;
  background: #00D9A3 !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
}

/* Fix 4: /tecnicas hero-badge KODOKAN JUDO (2.72) - reescrever
   Bg escuro solido + borda verde transparente + texto verde puro. */
.hero-badge {
  background: #1A2332 !important;
  border: 1px solid rgba(0, 217, 163, 0.4) !important;
}
.hero-badge .badge-text {
  color: #00D9A3 !important;
}

/* Fix 5: btn-gokyo EXPLORAR em 5 fundos coloridos (1.02-1.41) - reverter regressao
   Azul claro nao funciona em verde/amarelo. Usar fundo dark solido universal. */
.btn-gokyo {
  background: rgba(26, 35, 50, 0.95) !important;
  color: #FFFFFF !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

/* ============================================================
   /gokyo specific - found in W6 follow-up audit
   ============================================================ */

/* Fix 6: gokyo-badge "5 grupos oficiais da Kodokan" branco-em-branco (1.00)
   .badge-text interno tem cor branca propria que sobrescreve o parent. */
.gokyo-badge {
  background: rgba(0, 217, 163, 0.15) !important;
  border: 1px solid rgba(0, 217, 163, 0.4) !important;
}
.gokyo-badge,
.gokyo-badge .badge-text,
.gokyo-badge span {
  color: #1A2332 !important;
}

/* Fix 7: .stat-value e .stat-label navy-em-navy (1.00) em hero/cards escuros
   O override anterior (linha 88-91) assumiu bg claro mas em /gokyo o bg eh navy.
   Branco em hero/section escuro, navy em cards claros - usar contexto. */
.gokyo-hero .stat-value,
.gokyo-hero .stat-label,
.hero-section .stat-value,
.hero-section .stat-label,
[class*="hero"] .stat-value,
[class*="hero"] .stat-label,
.gokyo-stats .stat-value,
.gokyo-stats .stat-label {
  color: #FFFFFF !important;
}
.gokyo-hero .stat-label,
.gokyo-stats .stat-label {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Fix 8: descricoes dos cards gokyo cinza-claro em off-white (1.41)
   tecnicas.css gerou `p { color: #CBD5E0 }` que vazou pra cards claros.
   Sobrescrever com specificity maior via attribute selector. */
[class*="tecnica-card"] p,
[class*="gokyo-card"] p,
a.tecnica-card p,
a.gokyo-card p,
.card-descricao,
.tecnica-card .descricao,
.gokyo-card .descricao {
  color: #475569 !important;
}

/* ============================================================
   FIX FINAL - 2026-06-06 - remocao do body{color:white} global
   Cards de info / glossario / share / placeholder estavam herdando
   branco e ficando invisiveis sobre fundo claro. Regras explicitas
   por componente garantem contraste >= 4.5:1 (AA texto normal).
   ============================================================ */

/* Cards de informacoes tecnicas (Nome/Significado/Categoria/Grupo/Ordem) */
.info-value,
.info-label,
.meta-value,
.meta-label,
.info-card .info-value,
.info-card .info-label,
.tecnica-info .info-value,
.tecnica-info .info-label {
  color: #1A2332 !important;
}

/* Glossario e listas de definicao (dt/dd) - sempre escuro em cards claros */
dl dt,
dl dd,
.glossario dt,
.glossario dd,
.definition-list dt,
.definition-list dd {
  color: #1A2332 !important;
}

/* Placeholder 'em construcao' (.text-content) - estava branco-em-branco */
.text-content,
.placeholder-text,
.em-construcao,
.empty-state-text {
  color: #475569 !important;
}

/* Label 'Compartilhar:' - estava herdando branco */
.share-label,
.share-section .label,
.compartilhar-label {
  color: #1A2332 !important;
}

/* Botao 'Marcar progresso' - Tailwind text-white sem bg color = invisivel.
   Force fundo dark e texto branco para garantir contraste. */
button.inline-flex.items-center.gap-2,
.btn-marcar-progresso,
button.progress-toggle {
  background: #1A2332 !important;
  color: #FFFFFF !important;
  border: 1px solid #00D9A3 !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
}

/* Mobile login button - estava navy sobre quase-preto (ratio 1.17) */
.mobile-login-btn,
a.mobile-login-btn,
.nav-mobile .login-btn {
  color: #FFFFFF !important;
  background: rgba(0, 217, 163, 0.15) !important;
  border: 1px solid rgba(0, 217, 163, 0.5) !important;
}

/* Breadcrumb sobre fundo navy - Bootstrap primary (#0d6efd) ratio 3.51
   Substituir por azul claro AA-safe sobre dark. */
nav.breadcrumb a,
.breadcrumb a,
nav[aria-label="breadcrumb"] a,
.breadcrumb-nav a {
  color: #4D9BFF !important;
}

/* Titulo romaji principal sobre navy - ratio 3.7 (#008B6E em navy)
   Clarear para verde-lima AA. */
.title-japones,
.gokyo-card .title-japones,
.tecnica-titulo .title-japones,
h1 .title-japones,
h2 .title-japones {
  color: #4ADE80 !important;
}

/* Kanji decorativo interno do title (ratio 1.74) - decorativo, suavizar
   mas garantir nao ficar invisivel se virar informativo. */
.title-japones span,
.title-japones .kanji-decor {
  color: #00A47A !important;
}

/* Pagina /login - botao social Google (creme sobre branco semi-transp = invisivel) */
.btn-social,
.btn-social.btn-google,
.btn-social.btn-github,
.btn-social.btn-facebook {
  color: #1A2332 !important;
  background: #FFFFFF !important;
  border: 1px solid #CBD5E0 !important;
}

/* Link 'Voltar para Home' no /login - verde marca sobre creme (ratio 1.74) */
.link-home,
a.link-home,
.login-page .link-home {
  color: #008060 !important;
}

/* Headings dentro de containers de conteudo herdam cor do componente
   (em vez de cair pra default branco do antigo body). */
.container-medium h1,
.container-medium h2,
.container-medium h3,
.container-medium h4,
.container-medium h5,
.container-medium h6,
.container-medium p,
.info-card h1,
.info-card h2,
.info-card h3,
.info-card h4,
.info-card h5,
.info-card h6,
.info-card p {
  color: inherit;
}