/* src/style.css */

/* Небольшие дополнения к Tailwind без сборки.
   Tailwind CDN уже задаёт большинство стилей. */

   :root {
    /* Можно расширять под собственную палитру/акценты */
    --px-focus: rgba(24, 24, 27, 0.35);
  }

  html, body {
    height: 100%;
  }

  /* Более аккуратный фокус, если нужно */
  :focus-visible {
    outline: 2px solid var(--px-focus);
    outline-offset: 3px;
    border-radius: 14px;
  }

  /* Убираем стандартный маркер у summary (на некоторых браузерах) */
  summary::-webkit-details-marker {
    display: none;
  }

  /* Плавные микро-анимации (уважаем prefers-reduced-motion) */
  @media (prefers-reduced-motion: no-preference) {
    a, button, summary, input, textarea, select {
      transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease, opacity 160ms ease;
    }

    details[open] summary {
      opacity: 0.95;
    }
  }

  /* Улучшаем читаемость плейсхолдеров */
  ::placeholder {
    opacity: 0.75;
  }

  /* Небольшой helper-класс для скрытия элементов, если понадобится в JS */
  .is-hidden {
    display: none !important;
  }

  /* Состояния валидации формы */
  .px-invalid {
    border-color: rgba(239, 68, 68, 0.65) !important; /* red-500 */
  }

  .px-valid {
    border-color: rgba(34, 197, 94, 0.55) !important; /* green-500 */
  }

  /* Микро-тост */
  .px-toast {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 60;
    max-width: min(720px, calc(100vw - 24px));
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(228, 228, 231, 0.9);
    background: rgba(255, 255, 255, 0.92);
    color: #18181b;
    box-shadow: 0 10px 30px rgba(0,0,0,0.10);
    backdrop-filter: blur(10px);
  }

  .dark .px-toast {
    border-color: rgba(63, 63, 70, 0.9);
    background: rgba(9, 9, 11, 0.72);
    color: #fafafa;
  }