/* ============================================================================
   Smart Lyceum — tokens.css
   Дизайн-токены: палитра, типографика, отступы, радиусы, тени, z-индексы.
   Загружается первым, до app.css и components.css. Не должно быть правил
   для классов — только :root и общие reset'ы (:where/минимальные).
   ============================================================================ */

:root {
  /* Палитра — утверждённая концепция "calm product UI" */
  --app-bg-color: #f7f8fb;
  --app-card-bg: #ffffff;
  --app-surface-translucent: rgba(255, 255, 255, 0.88);
  --app-surface-muted: #f7f8fb;

  --app-text-primary: #1c1d21;
  --app-text-secondary: #8a94a4;
  --app-text-tertiary: #b8c1cc;

  /* Primary — VK-синий (#2688eb), стандарт трекера/канбана.
     iOS-синий (#007aff) больше не используется как primary. */
  --app-primary-color: #2688eb;
  --app-primary-hover: #2072c4;
  --app-primary-active: #1a5fa8;
  --app-primary-soft: rgba(38, 136, 235, 0.12);
  --app-primary-soft-strong: rgba(38, 136, 235, 0.18);
  --app-primary-shadow: 0 4px 12px rgba(38, 136, 235, 0.25);

  --app-border-color: #e1e5eb;
  --app-border-soft: rgba(225, 229, 235, 0.62);
  --app-input-bg: #f7f8fb;        /* приглушённая заливка для вторичных поверхностей */
  --app-input-fill: #ffffff;      /* заливка самих полей — белая, как в концепции */
  --app-input-hover: #eff1f3;

  /* Семантические цвета */
  --app-success: #34c759;
  --app-success-soft: rgba(52, 199, 89, 0.14);
  --app-success-soft-border: rgba(52, 199, 89, 0.22);
  --app-danger: #ff3347;
  --app-danger-soft: rgba(255, 51, 71, 0.10);
  --app-danger-soft-border: rgba(255, 51, 71, 0.18);
  --app-warning: #ff9500;
  --app-warning-soft: rgba(255, 149, 0, 0.12);
  --app-purple: #af52de;
  --app-purple-soft: rgba(175, 82, 222, 0.14);
  --app-gray: #8e8e93;
  --app-gray-soft: rgba(142, 142, 147, 0.14);

  /* Статусные цвета (для канбана/лидерборда) */
  --app-status-planned: #2688eb;
  --app-status-in-progress: #f5a623;
  --app-status-done: #50e3c2;
  --app-status-subscribed: #3fa46a;
  --app-status-unsubscribed: #d0021b;
  --app-status-subscribed-soft: #f0faf3;
  --app-status-unsubscribed-soft: #fef2f2;

  /* Тени */
  --app-shadow: 0 6px 18px rgba(20, 28, 40, 0.045);
  --app-shadow-soft: 0 10px 28px rgba(20, 28, 40, 0.05);
  --app-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.02);

  /* Радиусы */
  --app-radius-xs: 6px;
  --app-radius-s: 10px;
  --app-radius-m: 14px;
  --app-radius-l: 20px;
  --app-radius-xl: 24px;
  --app-radius-pill: 999px;

  /* Размеры */
  --app-max-width: 460px;
  --app-input-height: 44px;
  --app-chip-size: 36px;
  --app-safe-bottom: env(safe-area-inset-bottom, 20px);

  /* Z-индексы — единая шкала */
  --app-z-header: 100;
  --app-z-panel: 200;
  --app-z-modal: 1000;
  --app-z-modal-pet: 1010;
  --app-z-modal-picker: 1100;
  --app-z-loader: 2000;
  --app-z-toast: 9999;

  /* Фоновые блобы (опционально) */
  --app-blob-a: rgba(38, 136, 235, 0.08);
  --app-blob-b: rgba(52, 199, 89, 0.07);

  /* Обратная совместимость: --vk-* алиасы для легаси-разметки */
  --vk-bg-color: var(--app-bg-color);
  --vk-card-bg: var(--app-card-bg);
  --vk-text-primary: var(--app-text-primary);
  --vk-text-secondary: var(--app-text-secondary);
  --vk-text-tertiary: var(--app-text-tertiary);
  --vk-primary-color: var(--app-primary-color);
  --vk-primary-hover: var(--app-primary-hover);
  --vk-primary-hover-color: var(--app-primary-hover);
  --vk-primary-active: var(--app-primary-active);
  --vk-primary-active-color: var(--app-primary-active);
  --vk-radius-s: var(--app-radius-s);
  --vk-radius-m: var(--app-radius-m);
  --vk-radius-l: var(--app-radius-l);
  --vk-shadow: var(--app-shadow);
  --vk-shadow-soft: var(--app-shadow-soft);
  --vk-input-bg: var(--app-input-bg);
  --vk-input-hover-bg: var(--app-input-hover);
  --vk-border-color: var(--app-border-color);
  --vk-border-soft: var(--app-border-soft);
  --vk-danger-color: var(--app-danger);
  --vk-success-bg: rgba(52, 199, 89, 0.1);
  --vk-success-text: #1b8c3e;
  --vk-success-border: rgba(52, 199, 89, 0.25);
  --vk-warning: var(--app-warning);
  --vk-purple: var(--app-purple);
}

/* === Минимальный глобальный reset ===
   Подавляет дефолтные отступы и подсветку тапа на мобильных.
   Конкретные стили элементов — в app.css. */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Helvetica Neue", sans-serif;
  background-color: var(--app-bg-color);
  color: var(--app-text-primary);
  padding: 20px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}