/* === Variables & themes */
:root {
  --bg: #1a1b26;
  --surface: #24283b;
  --text: #c0caf5;
  --muted: #565f89;
  --accent: #7aa2f7;
  --duty: #9ece6a;
  --today: #bb9af7;
  --unavailable: #e0af68;
  --vacation: #7dcfff;
  --error: #f7768e;
  --timeline-date-width: 3.6em;
  --timeline-track-width: 10px;
  --transition-fast: 0.15s;
  --transition-normal: 0.25s;
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Light theme: prefer Telegram themeParams (--tg-theme-*), fallback to Telegram-like palette */
[data-theme="light"] {
  --bg: var(--tg-theme-bg-color, #f0f1f3);
  --surface: var(--tg-theme-secondary-bg-color, #e0e2e6);
  --text: var(--tg-theme-text-color, #343b58);
  --muted: var(--tg-theme-hint-color, #6b7089);
  --accent: var(--tg-theme-link-color, #2e7de0);
  --duty: #587d0a;
  --today: var(--tg-theme-link-color, var(--tg-theme-accent-text-color, #2481cc));
  --unavailable: #b8860b;
  --vacation: #0d6b9e;
  --error: #c43b3b;
}

/* Dark theme: prefer Telegram themeParams, fallback to Telegram dark palette */
[data-theme="dark"] {
  --bg: var(--tg-theme-bg-color, #17212b);
  --surface: var(--tg-theme-secondary-bg-color, #232e3c);
  --text: var(--tg-theme-text-color, #f5f5f5);
  --muted: var(--tg-theme-hint-color, #708499);
  --accent: var(--tg-theme-link-color, #6ab3f3);
  --today: var(--tg-theme-link-color, var(--tg-theme-accent-text-color, #6ab2f2));
  --duty: #5c9b4a;
  --unavailable: #b8860b;
  --vacation: #5a9bb8;
  --error: #e06c75;
}

/* === Layout & base */
html {
  scrollbar-gutter: stable;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: none;
}

html::-webkit-scrollbar {
  display: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

.container {
  max-width: 420px;
  margin: 0 auto;
  padding: 12px;
  padding-top: 0px;
  padding-bottom: env(safe-area-inset-bottom, 12px);
}

[data-theme="light"] .container {
  border-radius: 12px;
}