/* LA21 Design Tokens
 *
 * Подключается ПЕРЕД style.css. Любой стиль в проекте может ссылаться на
 * эти переменные вместо хардкода хексов и pixel-значений. Менять брендовый
 * цвет / spacing — теперь это правка одной строки.
 *
 * Dark mode (через @media prefers-color-scheme: dark) переопределяет
 * нейтральные цвета в нижней части файла.
 */

:root {
  /* ─── Brand ─── */
  --la-orange: #f59a00;
  --la-orange-dark: #c97d00;
  --la-orange-light: #ffb84d;
  --la-orange-shadow: rgba(245, 154, 0, 0.22);

  /* ─── Status ─── */
  --la-success: #2e7d32;
  --la-warning: #d68910;
  --la-error: #c0392b;
  --la-info: #1976d2;

  /* ─── Neutral ─── */
  --la-text: #222;
  --la-text-2: #555;
  --la-text-3: #888;
  --la-bg: #fff;
  --la-bg-2: #f6f6f6;
  --la-bg-3: #ececec;
  --la-border: #e0e0e0;
  --la-border-strong: #cfcfcf;

  /* ─── Spacing (4px baseline grid) ─── */
  --space-0: 0;
  --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;

  /* ─── Radii ─── */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 16px;
  --radius-pill: 999px;

  /* ─── Shadows ─── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 6px 14px rgba(0, 0, 0, 0.08);

  /* ─── Motion ─── */
  --duration-fast: 150ms;
  --duration-mid: 250ms;
  --duration-slow: 400ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* ─── Type scale (clamp() для fluid sizing) ─── */
  --fs-xs: clamp(11px, 0.7rem, 12px);
  --fs-sm: clamp(12px, 0.8rem, 13px);
  --fs-md: clamp(14px, 0.95rem, 15px);
  --fs-lg: clamp(16px, 1.1rem, 18px);
  --fs-xl: clamp(20px, 1.4rem, 24px);
  --fs-xxl: clamp(24px, 1.8rem, 32px);

  /* ─── Z-layers ─── */
  --z-modal: 100;
  --z-toast: 200;
  --z-bottom-nav: 50;

  /* ─── Liquid Glass ───
   * Полупрозрачный материал как в Apple Liquid Glass. Применяется на карточках,
   * модалках, sticky-навигации. Требует backdrop-filter (Safari 9+, Chromium 76+).
   * Fallback: solid surface через @supports not (backdrop-filter: blur(1px)) ниже.
   *
   * Состав каждого глассового слоя:
   *   background        — полупрозрачный тон (тёмный/светлый в зависимости от темы)
   *   backdrop-filter   — blur + saturate (saturate=140% даёт «живой» оттенок)
   *   border-top-light  — 1px тонкий highlight сверху (имитация edge specular)
   *   shadow            — мягкая тень снизу для отделения от фона
   */
  --glass-bg: rgba(20, 24, 36, 0.66);
  --glass-bg-strong: rgba(14, 18, 28, 0.82);
  --glass-bg-soft: rgba(22, 26, 40, 0.46);
  --glass-bg-tinted: rgba(245, 154, 0, 0.08);
  /* Внутренний градиент стекла — сверху-слева тёплый highlight, снизу-справа
   * мягкое затемнение. Имитирует световой источник сверху и кривизну стекла.
   * Накладывается ПОВЕРХ glass-bg в `background:` shorthand. */
  --glass-sheen:
    radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.10), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(0, 0, 0, 0.18), transparent 60%),
    linear-gradient(170deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0.08) 100%);
  --glass-sheen-strong:
    radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.14), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(0, 0, 0, 0.22), transparent 55%),
    linear-gradient(170deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, 0.10) 100%);
  --glass-border: 1px solid rgba(255, 255, 255, 0.10);
  --glass-border-strong: 1px solid rgba(255, 255, 255, 0.14);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --glass-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --glass-blur: blur(20px) saturate(140%);
  --glass-blur-soft: blur(12px) saturate(125%);
  --glass-blur-strong: blur(28px) saturate(150%);
  --glass-shadow: 0 12px 32px rgba(0, 0, 0, 0.36);
  --glass-shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.24);
  --glass-shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Dark mode — автоматический по системной настройке.
 * Brand orange приглушаем чтобы не слепил на тёмном фоне. */
@media (prefers-color-scheme: dark) {
  :root {
    --la-text: #e6e6e6;
    --la-text-2: #b8b8b8;
    --la-text-3: #888;
    --la-bg: #1a1a1a;
    --la-bg-2: #242424;
    --la-bg-3: #2e2e2e;
    --la-border: #3a3a3a;
    --la-border-strong: #4a4a4a;
    --la-orange: #f0a020;
    --la-orange-light: #ffb84d;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6);
    --shadow-card: 0 6px 14px rgba(0, 0, 0, 0.4);
  }
}

/* Reduced motion: short-circuit все длительности до 1мс. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-mid: 1ms;
    --duration-slow: 1ms;
  }
}

/* Reduced transparency (iOS / macOS Accessibility): отключаем blur, переводим
 * стекло в solid surface чтобы не нагружать GPU и сохранить контрастность. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg: var(--la-bg-2, #242424);
    --glass-bg-strong: var(--la-bg-2, #242424);
    --glass-bg-soft: var(--la-bg-2, #242424);
    --glass-blur: none;
    --glass-blur-soft: none;
    --glass-blur-strong: none;
  }
}