/*
 * MyHome Cuidadores — camada de refinamento visual (Infinity, 2026-06-11)
 * Carregada DEPOIS do CSS do bundle Lovable. O bundle deriva o tema de tokens
 * HSL (--primary etc.), então a recalibração abaixo re-tematiza o site inteiro
 * de forma coerente sem tocar no JS compilado. Reversível: remover este arquivo
 * e o <link> no index.html restaura o visual antigo byte a byte.
 *
 * Direção (skill ui-ux-pro-max, estilo "Accessible & Ethical" p/ healthcare):
 * uma família de cor liderando (o teal da marca), acento quente único e raro,
 * zero gradiente bicolor, elevação consistente, contraste AA, foco visível.
 */

/* ───── 1. Tokens: teal da marca assume o comando (era azul 210) ───── */
:root {
  --primary: 182 72% 25%;            /* teal profundo MyHome (#12767c) */
  --ring: 182 72% 30%;
  --secondary: 174 55% 36%;          /* teal médio, escurecido p/ AA em fundo claro */
  --accent: 20 80% 46%;              /* laranja firme: 4,6:1 sobre o fundo creme (AA) */
  --muted-foreground: 220 15% 38%;   /* cinza de apoio mais legível (era 45%) */
  --border: 182 18% 87%;             /* hairlines na temperatura da marca */
}

/* ───── 2. Fim dos gradientes bicolor (tell de template) ───── */
/* Botões: sólido profundo, hover que escurece (não estica) */
.gradient-primary {
  background-image: none !important;
  background-color: hsl(182 72% 25%);
  box-shadow: 0 10px 26px -10px hsl(182 72% 25% / 0.45);
}
.gradient-primary:hover {
  background-color: hsl(182 72% 20%);
  box-shadow: 0 14px 30px -10px hsl(182 72% 22% / 0.5);
}

/* Headings duotone viram uma voz só (teal profundo, sem clip de gradiente) */
.text-gradient {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: hsl(182 72% 27%);
}

/* Banda de estatísticas: de azul→verde berrante p/ profundidade mono-família */
.from-primary.to-secondary {
  background-image: linear-gradient(135deg, hsl(196 45% 17%), hsl(182 62% 21%)) !important;
}
.from-primary.to-secondary [class*="text-white/7"],
.from-primary.to-secondary [class*="text-white/8"] {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Tiles de ícone (gradiente teal→azul) viram sólido da marca */
.from-secondary.to-primary {
  background-image: none !important;
  background-color: hsl(182 72% 25%) !important;
}

/* ───── 3. Hero: um acento só (âmbar quente, conversa com a foto) ───── */
h1 .text-secondary,
h1 .text-accent {
  color: hsl(27 96% 73%);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* ───── 4. Elevação consistente (uma escala de sombra, na cor da marca) ───── */
.shadow-2xl { box-shadow: 0 22px 48px -16px hsl(196 40% 15% / 0.22) !important; }
.shadow-xl  { box-shadow: 0 14px 34px -14px hsl(196 40% 15% / 0.18) !important; }
.shadow-lg  { box-shadow: 0 10px 24px -12px hsl(196 40% 15% / 0.14) !important; }

/* ───── 5. Acessibilidade: foco visível em tudo que navega ───── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid hsl(182 72% 30% / 0.55);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Inputs do formulário: borda presente e foco da marca */
input, textarea {
  border-color: hsl(182 16% 82%);
}
input:focus, textarea:focus {
  border-color: hsl(182 72% 32%);
  box-shadow: 0 0 0 3px hsl(182 72% 32% / 0.15);
}

/* ───── 6. Cores literais fora da família (azul/verde soltos) → marca ───── */
.bg-blue-500, .bg-blue-600 { background-color: hsl(182 72% 25%) !important; }
.bg-blue-100 { background-color: hsl(182 35% 92%) !important; }
.text-blue-600, .text-blue-700 { color: hsl(182 72% 24%) !important; }
.bg-green-100 { background-color: hsl(174 35% 91%) !important; }

/* ───── 7. Movimento com respeito a reduced-motion ───── */
@media (prefers-reduced-motion: reduce) {
  .gradient-primary, .shadow-xl, .shadow-2xl { transition: none !important; }
}