/* Design tokens - базовые переменные от Telegram theme */
:root {
  /* Telegram theme colors - приоритет от Telegram WebApp API */
  --tg-theme-bg-color: #0f172a;
  --tg-theme-text-color: #e5e7eb;
  --tg-theme-hint-color: #94a3b8;
  --tg-theme-link-color: #60a5fa;
  --tg-theme-button-color: #3b82f6;
  --tg-theme-button-text-color: #ffffff;
  --tg-theme-secondary-bg-color: #111827;
  --tg-theme-header-bg-color: #1f2937;
  --tg-theme-accent-text-color: #ffffff;
  --tg-theme-section-bg-color: #273449;
  --tg-theme-bottom-bar-bg-color: #1f2937;
  --tg-theme-overlay-color: rgba(0, 0, 0, 0.5);
  --tg-theme-destructive-text-color: #ef4444;

  /* Safe area insets - будут установлены из Telegram API */
  --tg-safe-area-inset-top: 0px;
  --tg-safe-area-inset-bottom: 0px;
  --tg-safe-area-inset-left: 0px;
  --tg-safe-area-inset-right: 0px;

  /* Application colors - адаптируются под Telegram тему */
  --app-bg: var(--tg-theme-bg-color, #0f172a);
  --app-text: var(--tg-theme-text-color, #e5e7eb);
  --app-hint: var(--tg-theme-hint-color, #94a3b8);
  --app-link: var(--tg-theme-link-color, #60a5fa);
  --app-overlay: var(--tg-theme-overlay-color, rgba(0, 0, 0, 0.5));

  /* Surface colors - иерархия фонов */
  --surface-0: var(--app-bg);
  --surface-1: var(--tg-theme-secondary-bg-color, #111827);
  --surface-2: var(--tg-theme-section-bg-color, #1f2937);
  --surface-3: var(--tg-theme-header-bg-color, #273449);
  --surface-4: var(--tg-theme-bottom-bar-bg-color, #374151);

  /* Accent colors - основные действия */
  --accent: var(--tg-theme-button-color, #3b82f6);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --accent-hover: rgba(59, 130, 246, 0.8);
  --accent-active: rgba(59, 130, 246, 0.9);

  /* Semantic colors - статусы и сообщения */
  --success: #22c55e;
  --success-bg: rgba(34, 197, 94, 0.1);
  --success-text: #166534;
  --success-border: #22c55e;

  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.1);
  --warning-text: #92400e;
  --warning-border: #f59e0b;

  --danger: var(--tg-theme-destructive-text-color, #ef4444);
  --danger-bg: rgba(239, 68, 68, 0.1);
  --danger-text: #991b1b;
  --danger-border: #ef4444;

  --info: #3b82f6;
  --info-bg: rgba(59, 130, 246, 0.1);
  --info-text: #1e40af;
  --info-border: #3b82f6;

  /* Legacy colors для обратной совместимости */
  --bg: var(--app-bg);
  --card: var(--surface-1);
  --text: var(--app-text);
  --muted: var(--app-hint);

  /* Border radius - скругления */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Spacing - отступы */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Typography scale - размеры шрифта */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
  --font-size-5xl: 36px;

  /* Font weights - жирность шрифта */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line heights - межстрочные интервалы */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* Z-index scale - слои */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  --z-maximum: 9999;

  /* Shadows - тени */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Transitions - анимации (с уважением к prefers-reduced-motion) */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /* Breakpoints - медиа запросы */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* Component specific tokens */
  --button-height-sm: 32px;
  --button-height: 40px;
  --button-height-lg: 48px;
  --button-padding-x: 16px;
  --button-padding-y: 8px;

  --input-height: 40px;
  --input-padding-x: 12px;
  --input-border-radius: var(--radius-md);

  --card-padding: var(--space-4);
  --card-border-radius: var(--radius-lg);
  --card-shadow: var(--shadow-md);

  --tabbar-height: 60px;
  --header-height: 60px;

  /* Focus ring - для accessibility */
  --focus-ring: 0 0 0 2px var(--accent);
  --focus-ring-offset: 2px;

  /* Touch interaction */
  --tap-highlight-color: transparent;

  /* Activity colors - цветовая схема для активностей */
  --daily: #e7b93e;
  --quests: #3faf6e;
  --work: #2fa7a0;
  --slots: #4b7fff;
  --coinflip: #d6a441;
  --duel: #d25b52;
  --clan: #7a5cfa;
  --events: #e45ac3;

  /* Animation keyframes */
  --animation-fade-in: fadeIn 0.3s ease-in-out;
  --animation-slide-up: slideUp 0.3s ease-out;
  --animation-slide-down: slideDown 0.3s ease-out;
  --animation-scale-in: scaleIn 0.2s ease-out;
  --animation-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Color scheme для правильной работы системных элементов */
:root {
  color-scheme: dark;
}

/* Light theme overrides - если Telegram в светлой теме */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    
    --tg-theme-bg-color: #ffffff;
    --tg-theme-text-color: #1f2937;
    --tg-theme-hint-color: #6b7280;
    --tg-theme-link-color: #3b82f6;
    --tg-theme-button-color: #3b82f6;
    --tg-theme-button-text-color: #ffffff;
    --tg-theme-secondary-bg-color: #f9fafb;
    --tg-theme-header-bg-color: #ffffff;
    --tg-theme-section-bg-color: #f3f4f6;
    --tg-theme-bottom-bar-bg-color: #ffffff;
    --tg-theme-overlay-color: rgba(0, 0, 0, 0.3);
    --tg-theme-destructive-text-color: #dc2626;
  }
}

/* Dark theme overrides - принудительно темная тема */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    
    --tg-theme-bg-color: #0f172a;
    --tg-theme-text-color: #e5e7eb;
    --tg-theme-hint-color: #94a3b8;
    --tg-theme-link-color: #60a5fa;
    --tg-theme-button-color: #3b82f6;
    --tg-theme-button-text-color: #ffffff;
    --tg-theme-secondary-bg-color: #111827;
    --tg-theme-header-bg-color: #1f2937;
    --tg-theme-section-bg-color: #273449;
    --tg-theme-bottom-bar-bg-color: #1f2937;
    --tg-theme-overlay-color: rgba(0, 0, 0, 0.5);
    --tg-theme-destructive-text-color: #ef4444;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-normal: 0ms;
    --transition-slow: 0ms;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}