/* ==========================================================================
   Game Mods Platform - Design Tokens
   Единственный источник значений дизайна. Компоненты не должны использовать
   произвольные значения: только переменные из этого файла.
   ========================================================================== */

:root {
  /* ---------------------------- Radii ---------------------------------- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* --------------------------- Spacing --------------------------------- */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-2xl: 64px;

  /* --------------------------- Motion ---------------------------------- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 340ms;

  /* ------------------------- Typography -------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 21px;
  --text-2xl: 26px;
  --text-3xl: 34px;
  --text-4xl: 44px;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;

  /* --------------------------- Layout ---------------------------------- */
  --layout-max: 1280px;
  --layout-max-wide: 1480px;
  --layout-gutter: var(--spacing-md);
  --layout-gutter-lg: var(--spacing-lg);
  --header-height: 60px;
  --bottom-nav-height: 64px;
  --sidebar-width: 264px;

  /* ---------------------- Blur / glass strengths ----------------------- */
  --blur-strong: 24px;
  --blur-soft: 14px;
  --glass-saturate: 160%;

  /* --------------------------- Z-index --------------------------------- */
  --z-base: 1;
  --z-sticky: 20;
  --z-header: 40;
  --z-bottom-nav: 45;
  --z-sheet: 60;
  --z-modal: 70;
  --z-toast: 80;
}

/* ==========================================================================
   Dark theme (по умолчанию): современный near-black, несколько уровней surface
   Background -> Surface -> Card -> Floating Card
   ========================================================================== */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Слегка синий подтон вместо нейтрального серого: фон и поверхности
     читаются одной гаммой с акцентом, без «серой каши» между слоями. */
  --bg-base: #0A0A12;
  --bg-elevated: #10101A;

  --surface: #15151F;
  --surface-secondary: #1B1B28;
  --surface-card: #1E1E2C;
  --surface-floating: #262636;
  --surface-glass: rgba(21, 21, 31, 0.68);
  --surface-glass-strong: rgba(10, 10, 18, 0.86);

  --text-primary: #F5F5FA;
  --text-secondary: #B4B4C6;
  --text-muted: #8B8B9E;
  --text-on-accent: #FFFFFF;

  /* Акцент: синий — классический цвет ссылок и действий, читается на обеих темах. */
  --accent: #3B82F6;
  --accent-hover: #5C94F8;
  --accent-soft: rgba(59, 130, 246, 0.16);

  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);

  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 18px 48px rgba(0, 0, 0, 0.55);

  --overlay: rgba(6, 6, 12, 0.66);
  --skeleton: rgba(255, 255, 255, 0.07);
  --glow: 0 0 0 1px var(--accent-soft), 0 12px 32px rgba(59, 130, 246, 0.18);
}

/* ==========================================================================
   Light theme: не «белый лист», а несколько различимых уровней surface
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-base: #F1F2F6;
  --bg-elevated: #F7F8FB;

  --surface: #FFFFFF;
  --surface-secondary: #ECEEF4;
  --surface-card: #FFFFFF;
  --surface-floating: #FFFFFF;
  --surface-glass: rgba(255, 255, 255, 0.70);
  --surface-glass-strong: rgba(255, 255, 255, 0.88);

  --text-primary: #14141B;
  --text-secondary: #4C4C5A;
  --text-muted: #75757F;
  --text-on-accent: #FFFFFF;

  /* Тот же синий, адаптированный под светлый фон. */
  --accent: #1D66E0;
  --accent-hover: #1D5BD0;
  --accent-soft: rgba(29, 102, 224, 0.12);

  --border: rgba(16, 16, 24, 0.10);
  --border-strong: rgba(16, 16, 24, 0.18);

  --shadow: 0 10px 30px rgba(16, 16, 24, 0.10);
  --shadow-soft: 0 4px 14px rgba(16, 16, 24, 0.08);
  --shadow-float: 0 18px 48px rgba(16, 16, 24, 0.16);

  --overlay: rgba(16, 16, 24, 0.40);
  --skeleton: rgba(16, 16, 24, 0.07);
  --glow: 0 0 0 1px var(--accent-soft), 0 12px 32px rgba(91, 61, 245, 0.18);
}

/* ==========================================================================
   Status colors (health-индикаторы, уведомления) - одинаковы в обеих темах,
   отличаются только мягкие подложки
   ========================================================================== */
:root {
  /* Статусы выбраны средними по светлоте: читаются и на тёмном, и на светлом
     фоне — раньше success/danger «слепли» на светло теме. */
  --success: #14B87A;
  --success-soft: rgba(20, 184, 122, 0.14);
  --warning: #E8960C;
  --warning-soft: rgba(232, 150, 12, 0.16);
  --danger: #E5484D;
  --danger-soft: rgba(229, 72, 77, 0.16);
  --neutral-soft: rgba(128, 128, 148, 0.16);
}

/* ==========================================================================
   Reduced motion: системная настройка и пользовательский переключатель
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms;
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}

:root[data-reduce-motion="true"] {
  --duration-instant: 1ms;
  --duration-fast: 1ms;
  --duration-base: 1ms;
  --duration-slow: 1ms;
}

/* ==========================================================================
   Responsive layout scale: раскладки переключаются на уровне токенов
   ========================================================================== */
@media (min-width: 768px) {
  :root {
    --layout-gutter: var(--spacing-lg);
    --header-height: 64px;
    --text-3xl: 38px;
    --text-4xl: 52px;
  }
}

@media (min-width: 1024px) {
  :root {
    --layout-gutter: var(--spacing-xl);
  }
}