/* ==========================================================================
   KUAPABA • ESTILOS OFICIAIS E SISTEMA DE DESIGN VISUAL
   Centro de Recursos para Aprendizagem, Inclusão e Desenvolvimento Infantil
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,600&display=swap');

:root {
  --azul-caminho: #1769AA;
  --verde-encontro: #159A6B;
  --amarelo-descoberta: #F5B82E;
  --coral-cuidado: #F26B4F;
  --azul-petroleo: #17324D;
  --areia-clara: #FFF7E8;
  --areia-media: #F7EBD2;
  --branco-puro: #FFFFFF;
  --cinza-suave: #F4F6F9;
  --borda-suave: #E2E8F0;
}

/* Tipografia Base */
body {
  font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--azul-petroleo);
  background-color: var(--areia-clara);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--azul-petroleo);
}

/* Paleta Utilitária Kuapaba */
.bg-areia { background-color: var(--areia-clara); }
.bg-areia-media { background-color: var(--areia-media); }
.bg-azul-caminho { background-color: var(--azul-caminho); }
.bg-verde-encontro { background-color: var(--verde-encontro); }
.bg-amarelo-descoberta { background-color: var(--amarelo-descoberta); }
.bg-coral-cuidado { background-color: var(--coral-cuidado); }
.bg-azul-petroleo { background-color: var(--azul-petroleo); }

.text-azul-caminho { color: var(--azul-caminho); }
.text-verde-encontro { color: var(--verde-encontro); }
.text-amarelo-descoberta { color: var(--amarelo-descoberta); }
.text-coral-cuidado { color: var(--coral-cuidado); }
.text-azul-petroleo { color: var(--azul-petroleo); }

.border-azul-caminho { border-color: var(--azul-caminho); }
.border-verde-encontro { border-color: var(--verde-encontro); }
.border-coral-cuidado { border-color: var(--coral-cuidado); }

/* Botões Afetuosos */
.btn-kuapaba {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  padding: 0.75rem 1.5rem;
  border-radius: 1rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 4px rgba(23, 50, 77, 0.08);
  cursor: pointer;
}

.btn-kuapaba:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(23, 50, 77, 0.12);
}

.btn-azul {
  background-color: var(--azul-caminho);
  color: #FFFFFF;
}
.btn-azul:hover {
  background-color: #12558a;
  color: #FFFFFF;
}

.btn-verde {
  background-color: var(--verde-encontro);
  color: #FFFFFF;
}
.btn-verde:hover {
  background-color: #0f7a54;
  color: #FFFFFF;
}

.btn-coral {
  background-color: var(--coral-cuidado);
  color: #FFFFFF;
}
.btn-coral:hover {
  background-color: #d95337;
  color: #FFFFFF;
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--azul-caminho);
  color: var(--azul-caminho);
}
.btn-outline:hover {
  background-color: rgba(23, 105, 170, 0.08);
}

/* Cards Acolhedores */
.card-kuapaba {
  background: #FFFFFF;
  border-radius: 1.5rem;
  border: 1px solid var(--borda-suave);
  box-shadow: 0 4px 12px rgba(23, 50, 77, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-kuapaba:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(23, 50, 77, 0.08);
}

/* Molduras de Arte */
.moldura-livro {
  border: 3px solid #E2E8F0;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #FFFFFF;
  transition: border-color 0.2s;
}

.moldura-livro:hover {
  border-color: var(--coral-cuidado);
}

/* Barra de Acessibilidade */
.barra-acessibilidade {
  background: var(--azul-petroleo);
  color: #FFFFFF;
  font-size: 0.8rem;
  padding: 0.35rem 1rem;
}

/* MODOS DE ACESSIBILIDADE */
body.font-dyslexia {
  font-family: 'Comic Sans MS', 'Arial', sans-serif !important;
  letter-spacing: 0.08em !important;
  word-spacing: 0.16em !important;
  line-height: 1.9 !important;
}

body.font-size-lg {
  font-size: 1.15rem;
}
body.font-size-xl {
  font-size: 1.3rem;
}

body.theme-contrast {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}
body.theme-contrast .card-kuapaba,
body.theme-contrast header,
body.theme-contrast footer,
body.theme-contrast nav {
  background-color: #121212 !important;
  color: #FFFFFF !important;
  border-color: #FFFF00 !important;
}
body.theme-contrast h1, 
body.theme-contrast h2, 
body.theme-contrast h3, 
body.theme-contrast h4,
body.theme-contrast p,
body.theme-contrast span {
  color: #FFFFFF !important;
}
body.theme-contrast a {
  color: #FFFF00 !important;
  text-decoration: underline !important;
}

/* Efeito de Ondas Suaves Kuapaba */
.onda-kuapaba {
  background: linear-gradient(135deg, rgba(23, 105, 170, 0.05) 0%, rgba(21, 154, 107, 0.05) 50%, rgba(242, 107, 79, 0.05) 100%);
  border-radius: 2rem;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--azul-caminho);
}