/* ============================================================
   PerfectRent — Дизайн-токены
   Фирменные цвета: белый (основа), кораллово-оранжевый и
   небесно-голубой (взяты из логотипа PerfectRent).
   Светлая и тёмная темы через CSS-переменные.
   ============================================================ */

:root {
  /* Типографика */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Радиусы */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Прочее */
  --header-h: 68px;
  --container: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 150ms var(--ease);
  --transition: 250ms var(--ease);
}

/* ---------- LIGHT THEME (основной: белый) ---------- */
:root[data-theme='light'] {
  color-scheme: light;

  --bg: #ffffff;
  --bg-soft: #f6f8fa;
  --card: #ffffff;
  --card-2: #fafbfc;

  --text: #17232d;
  --text-2: #5d6b7a;
  --text-3: #93a0ac;

  --border: #e7ebef;
  --border-2: #d9e0e7;

  /* Кораллово-оранжевый (акцент, CTA) */
  --accent: #ef8352;
  --accent-hover: #e2723f;
  --accent-soft: #fdede3;
  --accent-contrast: #ffffff;
  --accent-text: #d1642f;

  /* Небесно-голубой (вторичный: ссылки, иконки) */
  --blue: #3fa9dc;
  --blue-hover: #2e94c6;
  --blue-soft: #e4f4fc;
  --blue-text: #127cb4;
  --blue-contrast: #ffffff;

  --success: #16a34a;
  --success-soft: #e9f7ef;
  --danger: #dc2626;
  --danger-soft: #fdecec;
  --warning: #b45309;
  --warning-soft: #fef3e2;
  --info: #127cb4;
  --info-soft: #e4f4fc;

  --ring: rgba(63, 169, 220, 0.4);
  --header-bg: rgba(255, 255, 255, 0.88);
  --glass: rgba(255, 255, 255, 0.8);

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 6px 16px -4px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 18px 40px -12px rgba(16, 24, 40, 0.14);
  --shadow-xl: 0 28px 60px -16px rgba(16, 24, 40, 0.2);

  --hero-glow: rgba(63, 169, 220, 0.13);
  --image-bg: #eef2f6;
}

/* ---------- DARK THEME ---------- */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0f1419;
  --bg-soft: #151b22;
  --card: #1a2129;
  --card-2: #212a34;

  --text: #f2f5f8;
  --text-2: #a7b3be;
  --text-3: #7a8794;

  --border: #2b343f;
  --border-2: #3a4552;

  --accent: #ef8352;
  --accent-hover: #e2723f;
  --accent-soft: rgba(239, 131, 82, 0.16);
  --accent-contrast: #ffffff;
  --accent-text: #ffb48c;

  --blue: #5dbde8;
  --blue-hover: #7fcff5;
  --blue-soft: rgba(93, 189, 232, 0.15);
  --blue-text: #7fcff5;
  --blue-contrast: #0d2430;

  --success: #4ade80;
  --success-soft: rgba(22, 163, 74, 0.14);
  --danger: #f87171;
  --danger-soft: rgba(220, 38, 38, 0.14);
  --warning: #fbbf24;
  --warning-soft: rgba(180, 83, 9, 0.16);
  --info: #7fcff5;
  --info-soft: rgba(93, 189, 232, 0.15);

  --ring: rgba(93, 189, 232, 0.4);
  --header-bg: rgba(15, 20, 25, 0.85);
  --glass: rgba(26, 33, 41, 0.75);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 28px 60px -16px rgba(0, 0, 0, 0.6);

  --hero-glow: rgba(63, 169, 220, 0.18);
  --image-bg: #1d2530;
}

/* Плавный переход фонов и границ во время переключения темы.
   Цвета ТЕКСТА не анимируем намеренно: на части мобильных движков
   transition цвета у наследующих элементов «залипает» (тема меняется,
   а текст остаётся старого цвета). Текст сменяется мгновенно — это
   гарантирует корректный результат на любом устройстве. */
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease) !important;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transition *,
  html.theme-transition *::before,
  html.theme-transition *::after {
    transition: none !important;
  }
}