@import "./styles/design-system.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
  }

  /* Respeitar configurações de zoom do usuário */
  html {
    overflow-x: hidden;
  }

  /* Garantir que imagens e vídeos sejam responsivos */
  img,
  video {
    max-width: 100%;
    height: auto;
  }

  /* Garantir que tabelas sejam scrolláveis em mobile */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  @media (min-width: 768px) {
    table {
      display: table;
    }
  }
}

/* Animação de rotação única */
@keyframes spin-once {
  0% {
    transform: rotate(0deg) scale(0);
    opacity: 0;
  }
  50% {
    transform: rotate(180deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

.animate-spin-once {
  animation: spin-once 0.6s ease-out forwards;
}

/* Dark mode hard fallback (ensure full-page background) */
html.dark,
html.dark body,
html.dark #root,
html.dark .app-root {
  background-color: #0f172a !important;
  background-image: linear-gradient(
    to bottom right,
    #0f172a,
    #1e293b
  ) !important;
}

/* Fontes alternativas acessibilidade */
@font-face {
  font-family: "OpenDyslexic";
  /* Tenta usar instalada localmente; se não houver, a regra abaixo garantirá um fallback visual */
  src: local("OpenDyslexic Regular"), local("OpenDyslexic");
  /* Dica: para uso em produção, adicione fontes web (woff2/woff) no diretório public/fonts
     e referencie aqui, por exemplo:
     src: url("/fonts/OpenDyslexic-Regular.woff2") format("woff2"),
          url("/fonts/OpenDyslexic-Regular.woff") format("woff"); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Quando a fonte OpenDyslexic não estiver disponível, use um fallback amigável à dislexia (Comic Sans) 
   e aplique ajustes de legibilidade para garantir diferença visual imediata */
html.dyslexic-font body {
  font-family: "OpenDyslexic", "Comic Sans MS", "Comic Sans", "Inter", system-ui,
    -apple-system, sans-serif;
  letter-spacing: 0.02em;
  word-spacing: 0.04em;
  font-variant-ligatures: none;
}

/* Espaçamento de linha aumentado */
html.line-spacing body {
  line-height: 1.6;
}
html.line-spacing p,
html.line-spacing li {
  line-height: 1.65;
}

/* Redução de movimento: remove animações e transições não essenciais */
html.reduced-motion *,
html.reduced-motion *::before,
html.reduced-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Filtro de luz azul (aplica overlay amarelada sem quebrar position: fixed) */
html.low-blue-light {
  position: relative;
}

html.low-blue-light::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 220, 150, 0.25),
    rgba(255, 200, 120, 0.25)
  );
  pointer-events: none;
  z-index: 999999;
  mix-blend-mode: multiply;
}

/* Garante que o menu de acessibilidade fique acima do filtro */
html.low-blue-light button[aria-label="Menu de Acessibilidade"],
html.low-blue-light [role="dialog"][aria-modal="true"] {
  z-index: 9999999 !important;
}

/* Modo foco: destaque reforçado no elemento focado, sem quebrar layout */
html.focus-mode *:focus-visible {
  outline: 4px solid #3b82f6; /* azul Tailwind 500 */
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
  border-radius: 6px;
  transition: outline-color 0.15s ease, box-shadow 0.15s ease;
}
/* Modo foco (escuro): cor de foco mais clara para contraste */
html.focus-mode.dark *:focus-visible,
.dark html.focus-mode *:focus-visible {
  outline-color: #60a5fa; /* azul 400 */
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.25);
}

@layer components {
  .btn-primary {
    @apply bg-gradient-to-l from-blue-800 to-blue-500 text-white px-4 py-2 rounded-lg hover:from-blue-900 hover:to-blue-600 transition-all duration-300 shadow-lg;
  }

  .btn-secondary {
    @apply bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors;
  }

  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }

  .form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
  }

  .status-agendada {
    @apply bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-medium;
  }

  .status-confirmada {
    @apply bg-gradient-to-l from-blue-700 to-blue-400 text-white px-2 py-1 rounded-full text-xs font-medium;
  }

  .status-realizada {
    @apply bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium;
  }

  .status-cancelada {
    @apply bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-medium;
  }

  .status-faltou {
    @apply bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs font-medium;
  }

  .gradient-blue-bg {
    @apply bg-gradient-to-l from-blue-800 to-blue-500;
  }

  .gradient-blue-hover {
    @apply hover:bg-gradient-to-l hover:from-blue-900 hover:to-blue-600;
  }

  .gradient-blue-light {
    @apply bg-gradient-to-l from-blue-600 to-blue-400;
  }

  /* Classes padronizadas para formulários */
  .form-input {
    @apply w-full border border-gray-300 rounded-lg py-2.5 px-3 text-sm sm:text-base;
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
    @apply dark:bg-slate-800 dark:border-slate-600 dark:text-white;
  }

  .form-select {
    @apply w-full border border-gray-300 rounded-lg py-2.5 px-3 text-sm sm:text-base bg-white;
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
    @apply dark:bg-slate-800 dark:border-slate-600 dark:text-white;
  }

  .form-textarea {
    @apply w-full border border-gray-300 rounded-lg py-2.5 px-3 text-sm sm:text-base;
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
    @apply dark:bg-slate-800 dark:border-slate-600 dark:text-white resize-none;
  }

  .form-label {
    @apply block text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
  }
}

/* Estilos de Acessibilidade - Alto Contraste */
.high-contrast {
  --tw-bg-opacity: 1;
}

.high-contrast body {
  background-color: #000 !important;
  color: #ffff00 !important;
}

/* Backgrounds brancos/claros viram pretos */
.high-contrast .bg-white,
.high-contrast .bg-gray-50,
.high-contrast .bg-gray-100 {
  background-color: #000 !important;
  color: #ffff00 !important;
  border-color: #ffff00 !important;
}

/* Backgrounds escuros ficam pretos */
.high-contrast .bg-gray-800,
.high-contrast .bg-gray-900 {
  background-color: #000 !important;
  color: #ffff00 !important;
}

/* Textos cinzas ficam amarelos */
.high-contrast .text-gray-400,
.high-contrast .text-gray-500,
.high-contrast .text-gray-600,
.high-contrast .text-gray-700,
.high-contrast .text-gray-800,
.high-contrast .text-gray-900 {
  color: #ffff00 !important;
}

/* Textos brancos ficam amarelos */
.high-contrast .text-white,
.high-contrast .text-gray-100 {
  color: #ffff00 !important;
}

/* Mockup da Landing Page - elementos de placeholder */
.high-contrast .bg-gray-200,
.high-contrast .bg-gray-300 {
  background-color: #ffff00 !important;
  border: 2px solid #000 !important;
}

.high-contrast .bg-blue-50,
.high-contrast .bg-blue-100,
.high-contrast .bg-purple-50,
.high-contrast .bg-purple-100 {
  background-color: #ffff00 !important;
  border: 2px solid #000 !important;
}

.high-contrast .bg-blue-200,
.high-contrast .bg-blue-800,
.high-contrast .bg-purple-200,
.high-contrast .bg-purple-800 {
  background-color: #ffff00 !important;
  border: 2px solid #000 !important;
}

/* Botões primários (verde/azul) */
.high-contrast .bg-blue-600,
.high-contrast .bg-blue-500,
.high-contrast .bg-green-600,
.high-contrast .bg-green-700 {
  background-color: #ffff00 !important;
  color: #000 !important;
  border: 2px solid #000 !important;
  font-weight: bold !important;
}

/* Botões com bordas */
.high-contrast .border-gray-300,
.high-contrast .border-gray-600,
.high-contrast .border-gray-200,
.high-contrast .border-gray-700 {
  border-color: #ffff00 !important;
}

/* Links e botões secundários */
.high-contrast a {
  color: #ffff00 !important;
  text-decoration: underline !important;
  font-weight: bold !important;
}

.high-contrast button {
  border: none !important;
}

/* Botões no header/navegação - sem borda */
.high-contrast header button,
.high-contrast nav button,
.high-contrast header a,
.high-contrast nav a {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffff00 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

/* Inputs e selects */
.high-contrast input,
.high-contrast select,
.high-contrast textarea {
  background-color: #fff !important;
  color: #000 !important;
  border: 3px solid #000 !important;
  font-weight: bold !important;
}

.high-contrast input::placeholder,
.high-contrast textarea::placeholder {
  color: #666 !important;
  opacity: 1 !important;
}

/* Badges e status */
.high-contrast .bg-green-100,
.high-contrast .bg-blue-100,
.high-contrast .bg-yellow-100,
.high-contrast .bg-red-100,
.high-contrast .bg-purple-100,
.high-contrast .bg-orange-100 {
  background-color: #ffff00 !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}

/* Tabelas */
.high-contrast table {
  border: 2px solid #ffff00 !important;
}

.high-contrast th,
.high-contrast td {
  border: 1px solid #ffff00 !important;
}

.high-contrast thead {
  background-color: #000 !important;
  color: #ffff00 !important;
}

/* Hover states */
.high-contrast tr:hover,
.high-contrast .hover\:bg-gray-50:hover,
.high-contrast .hover\:bg-gray-100:hover {
  background-color: #1a1a1a !important;
  color: #ffff00 !important;
}

/* Icons devem ser visíveis */
.high-contrast svg {
  color: #ffff00 !important;
  stroke: currentColor;
}

/* Botões de ação com cores específicas */
.high-contrast .text-blue-600,
.high-contrast .text-green-600,
.high-contrast .text-orange-600,
.high-contrast .text-red-600,
.high-contrast .text-purple-600 {
  color: #ffff00 !important;
}

.high-contrast .hover\:bg-blue-50:hover,
.high-contrast .hover\:bg-green-50:hover,
.high-contrast .hover\:bg-orange-50:hover,
.high-contrast .hover\:bg-red-50:hover {
  background-color: #333 !important;
}

/* Divisores e bordas */
.high-contrast .divide-y > * {
  border-color: #ffff00 !important;
}

/* Cards e containers */
.high-contrast .rounded-xl,
.high-contrast .rounded-lg {
  border: 2px solid #ffff00 !important;
}

/* Modals e dialogs */
.high-contrast .shadow-xl,
.high-contrast .shadow-sm {
  box-shadow: 0 0 0 3px #ffff00 !important;
}

/* Botões desabilitados */
.high-contrast button:disabled {
  background-color: #333 !important;
  color: #666 !important;
  border-color: #666 !important;
  opacity: 0.5 !important;
}

/* Paginação - página ativa */
.high-contrast .bg-green-600.text-white {
  background-color: #ffff00 !important;
  color: #000 !important;
  border: 3px solid #000 !important;
}

/* Calendário - células cinzas */
.high-contrast .bg-gray-200 {
  background-color: #000 !important;
  color: #ffff00 !important;
}

/* Calendário - dias da semana e células */
.high-contrast .bg-gray-50,
.high-contrast .bg-gray-100 {
  background-color: #000 !important;
  color: #ffff00 !important;
}

/* Calendário - dia atual (azul claro) */
.high-contrast .bg-blue-50 {
  background-color: #1a1a1a !important;
  color: #ffff00 !important;
  border: 3px solid #ffff00 !important;
}

/* Calendário - eventos/horários nas células */
.high-contrast .bg-blue-100,
.high-contrast .bg-green-100,
.high-contrast .text-blue-800,
.high-contrast .text-green-800,
.high-contrast .text-yellow-800,
.high-contrast .text-red-800,
.high-contrast .text-purple-800 {
  background-color: #ffff00 !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}

/* Calendário - Grid com divisórias amarelas */
.high-contrast .grid-cols-7 {
  background-color: #ffff00 !important;
  gap: 2px !important;
  padding: 2px !important;
}

.high-contrast .grid-cols-7 > div {
  background-color: #000 !important;
  border: 2px solid #ffff00 !important;
  color: #ffff00 !important;
}

/* Calendário - Background do grid */
.high-contrast .bg-gray-200.border.border-gray-200 {
  background-color: #ffff00 !important;
  border-color: #ffff00 !important;
}

/* Headers com fundo cinza */
.high-contrast .bg-gray-700 {
  background-color: #000 !important;
  color: #ffff00 !important;
}

/* Texto em fundos coloridos */
.high-contrast .text-blue-700,
.high-contrast .text-green-700,
.high-contrast .text-purple-700 {
  color: #000 !important;
}

/* Garantir que backgrounds cinzas fiquem pretos */
.high-contrast [class*="bg-gray"] {
  background-color: #000 !important;
  color: #ffff00 !important;
}

/* Garantir que textos cinzas fiquem amarelos */
.high-contrast [class*="text-gray"] {
  color: #ffff00 !important;
}

/* Modo Escuro Melhorado */
.dark {
  color-scheme: dark;
}

.dark body {
  background-color: #0f172a;
  background-image: linear-gradient(to bottom right, #0f172a, #1e293b);
  color: #e2e8f0;
}

/* High visibility toggles (override) */
.a11y-toggle-button {
  position: relative;
  outline: none;
}
.a11y-toggle-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.7),
    0 0 0 5px rgba(255, 255, 255, 0.9);
}
.a11y-toggle-track {
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15);
}
.dark .a11y-toggle-track {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}
.a11y-toggle-thumb {
  transition: transform 0.25s ease, background-color 0.25s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.a11y-toggle-track[data-active="true"] {
  background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
}
.a11y-toggle-track[data-active="false"] {
  background: linear-gradient(90deg, #cbd5e1, #94a3b8) !important;
}
.dark .a11y-toggle-track[data-active="false"] {
  background: linear-gradient(90deg, #475569, #334155) !important;
}
.a11y-toggle-track[data-active="true"] .a11y-toggle-thumb {
  background: #fff;
}
.a11y-toggle-status-label {
  font-size: 0.625rem; /* 10px */
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-block;
  margin-top: 2px;
  color: #64748b;
}
.dark .a11y-toggle-status-label {
  color: #94a3b8;
}
.a11y-toggle-track[data-active="true"] + .a11y-toggle-status-label {
  color: #2563eb;
}
.dark .a11y-toggle-track[data-active="true"] + .a11y-toggle-status-label {
  color: #60a5fa;
}

/* Containers e Cards */
.dark .bg-white {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

.dark .card,
.dark .rounded-lg,
.dark .shadow-md,
.dark .shadow-lg {
  background-color: #1e293b;
  border: 1px solid #334155;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5),
    0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

/* Textos */
.dark .text-gray-900 {
  color: #f1f5f9 !important;
}

.dark .text-gray-800 {
  color: #e2e8f0 !important;
}

.dark .text-gray-700 {
  color: #cbd5e1 !important;
}

.dark .text-gray-600 {
  color: #94a3b8 !important;
}

.dark .text-gray-500 {
  color: #64748b !important;
}

.dark .text-gray-400 {
  color: #475569 !important;
}

/* Inputs e Formulários */
.dark input,
.dark select,
.dark textarea,
.dark .form-input {
  background-color: #0f172a !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus,
.dark .form-input:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #64748b !important;
}

/* Botões */
.dark .bg-gray-100,
.dark .bg-gray-200 {
  background-color: #334155 !important;
  color: #e2e8f0 !important;
}

.dark .bg-gray-100:hover,
.dark .bg-gray-200:hover {
  background-color: #475569 !important;
}

/* Botões primários com brilho ajustado */
.dark .bg-blue-600 {
  background-color: #2563eb !important;
}

.dark .bg-green-600 {
  background-color: #16a34a !important;
}

.dark .bg-red-600 {
  background-color: #dc2626 !important;
}

/* Status badges - ajuste para melhor contraste */
.dark .status-agendada {
  background-color: #713f12 !important;
  color: #fde047 !important;
}

.dark .status-confirmada {
  background-color: #1e3a8a !important;
  color: #93c5fd !important;
}

.dark .status-realizada {
  background-color: #14532d !important;
  color: #86efac !important;
}

.dark .status-cancelada {
  background-color: #7f1d1d !important;
  color: #fca5a5 !important;
}

.dark .status-faltou {
  background-color: #374151 !important;
  color: #d1d5db !important;
}

/* Tabelas */
.dark table {
  border-color: #334155 !important;
}

.dark thead {
  background-color: #0f172a !important;
}

.dark tbody tr {
  border-color: #334155 !important;
}

.dark tbody tr:hover {
  background-color: #334155 !important;
}

/* Links */
.dark a {
  color: #60a5fa !important;
}

.dark a:hover {
  color: #93c5fd !important;
}

/* Bordas */
.dark .border-gray-200,
.dark .border-gray-300 {
  border-color: #334155 !important;
}

/* Gradientes - ajuste para modo escuro */
.dark .gradient-blue-bg,
.dark .bg-gradient-to-l {
  background: linear-gradient(to left, #1e40af, #1e3a8a) !important;
}

/* Header e navegação */
.dark header {
  background-color: #1e293b !important;
  border-bottom: 1px solid #334155 !important;
}

/* Modais */
.dark .modal-content {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

/* Scrollbar escura */
.dark ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.dark ::-webkit-scrollbar-track {
  background: #0f172a;
}

.dark ::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 5px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Divisores */
.dark hr,
.dark .divide-y > * {
  border-color: #334155 !important;
}

/* Dropdown menus */
.dark .dropdown-menu {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

.dark .dropdown-item:hover {
  background-color: #334155 !important;
}

/* Toast notifications */
.dark .toast {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

/* Shadows ajustadas */
.dark .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5) !important;
}

.dark .shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

.dark .shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5),
    0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

.dark .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5),
    0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

.dark .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5),
    0 10px 10px -5px rgba(0, 0, 0, 0.3) !important;
}

.dark .shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

/* Melhor foco para navegação por teclado */
*:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

.dark *:focus-visible {
  outline-color: #60a5fa;
}

/* Utilidades de responsividade global */
@layer utilities {
  /* Container responsivo com padding adaptável */
  .responsive-container {
    @apply w-full mx-auto px-3 sm:px-4 md:px-6 lg:px-8;
    max-width: 1920px;
  }

  /* Card responsivo */
  .responsive-card {
    @apply bg-white rounded-lg shadow-md p-3 sm:p-4 md:p-6;
  }

  .dark .responsive-card {
    @apply bg-slate-800 shadow-slate-900/50;
  }

  /* Texto responsivo */
  .text-responsive-sm {
    @apply text-xs sm:text-sm;
  }

  .text-responsive-base {
    @apply text-sm sm:text-base;
  }

  .text-responsive-lg {
    @apply text-base sm:text-lg md:text-xl;
  }

  .text-responsive-xl {
    @apply text-lg sm:text-xl md:text-2xl lg:text-3xl;
  }

  /* Botão responsivo */
  .btn-responsive {
    @apply px-3 py-2 sm:px-4 sm:py-2.5 md:px-6 md:py-3 text-sm sm:text-base;
  }

  /* Grid responsivo automático */
  .grid-responsive {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4 md:gap-6;
  }

  /* Espaçamento responsivo */
  .space-responsive {
    @apply space-y-3 sm:space-y-4 md:space-y-6;
  }

  /* Modal/Dialog responsivo */
  .modal-responsive {
    @apply w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl 2xl:max-w-4xl;
  }

  /* Input responsivo */
  .input-responsive {
    @apply px-3 py-2 sm:py-2.5 md:py-3 text-sm sm:text-base;
  }

  /* Ocultar em mobile */
  .hide-mobile {
    @apply hidden sm:block;
  }

  /* Mostrar apenas em mobile */
  .show-mobile {
    @apply block sm:hidden;
  }

  /* Stack em mobile, row em desktop */
  .stack-mobile {
    @apply flex flex-col sm:flex-row;
  }
}

/* Animações */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-slideIn {
  animation: slideIn 0.2s ease-out;
}

/* Transições suaves globais para modo escuro */
body,
.card,
.bg-white,
input,
select,
textarea,
button {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}
