/* ============================================================================
 * CMYK.OS — Design System («бренд-код»)
 * Источник правды для цвета, типографики, сетки, радиусов, теней,
 * материалов и анимаций. Основан на Apple Human Interface Guidelines
 * (iOS / iPadOS), адаптирован под наш стек: Bootstrap 5 + ванильный CSS.
 *
 * ВСЕ значения — через токены `--ds-*`. Новые экраны и правки оформляем
 * этими переменными/утилитами, чтобы стиль был единым по всей системе.
 * Документация и принципы: .cursor/rules/design-system.mdc
 * ========================================================================== */

:root {
  /* ── Шрифт (San Francisco на Apple-устройствах через -apple-system) ─────── */
  --ds-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
             system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ds-font-mono: 'SF Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ── Палитра: системные цвета iOS ──────────────────────────────────────── */
  --ds-blue:   #007aff;   /* primary / интерактив (ссылки, активные табы)     */
  --ds-blue-strong: #0062e3;
  --ds-green:  #34c759;   /* success                                          */
  --ds-red:    #ff3b30;   /* destructive / ошибки                             */
  --ds-orange: #ff9500;   /* warning                                          */
  --ds-yellow: #ffcc00;
  --ds-teal:   #30b0c7;
  --ds-indigo: #5856d6;
  --ds-purple: #af52de;
  --ds-pink:   #ff2d55;

  /* ── Бренд CMYK.OS (фирменное индиго — аватары, «мои» сообщения, акценты) ─ */
  --ds-brand:        #635bff;
  --ds-brand-strong: #4f46e5;
  --ds-brand-grad:   linear-gradient(145deg, #635bff 0%, #4338ca 100%);

  /* ── Фоны и поверхности (light) ────────────────────────────────────────── */
  --ds-bg:           #f5f5f7;  /* системный сгруппированный фон               */
  --ds-bg-subtle:    #f2f2f7;
  --ds-surface:      #ffffff;  /* карточки/ячейки                            */
  --ds-surface-2:    #fafafa;  /* вложенные/вторичные поверхности            */

  /* ── Текст / метки ─────────────────────────────────────────────────────── */
  --ds-label:           #1d1d1f;             /* основной текст               */
  --ds-label-secondary: #86868b;             /* подписи                      */
  --ds-label-tertiary:  #aeaeb2;             /* плейсхолдеры / пусто          */
  --ds-label-on-accent: #ffffff;

  /* ── Разделители и заливки ─────────────────────────────────────────────── */
  --ds-separator:        rgba(0, 0, 0, 0.08);
  --ds-separator-strong: rgba(0, 0, 0, 0.14);
  --ds-fill:             #f2f2f7;            /* нейтральная заливка чипов      */
  --ds-hairline:         rgba(0, 0, 0, 0.06);

  /* ── Семантические алиасы ──────────────────────────────────────────────── */
  --ds-primary: var(--ds-blue);
  --ds-success: var(--ds-green);
  --ds-warning: var(--ds-orange);
  --ds-danger:  var(--ds-red);

  /* Мягкие подложки статусов (для пиллов/баннеров) */
  --ds-success-bg: #e8f8ef; --ds-success-fg: #1a7f4b; --ds-success-bd: #c6f0d6;
  --ds-warning-bg: #fff8e6; --ds-warning-fg: #9a6100; --ds-warning-bd: #ffe4a8;
  --ds-danger-bg:  #ffecec; --ds-danger-fg:  #c41c1c; --ds-danger-bd:  #ffcfcf;
  --ds-info-bg:    #eaf3ff; --ds-info-fg:    #0062cc; --ds-info-bd:    #cfe4ff;

  /* ── Сетка отступов (8pt grid + половинные шаги) ───────────────────────── */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-7: 32px;
  --ds-space-8: 40px;

  /* ── Радиусы (близко к «continuous» углам Apple) ───────────────────────── */
  --ds-radius-sm:  10px;   /* мелкие чипы/кнопки в списках                    */
  --ds-radius-md:  14px;   /* стандартная кнопка / ячейка                     */
  --ds-radius-lg:  18px;   /* карточка                                        */
  --ds-radius-xl:  22px;   /* крупная карточка / модалка                      */
  --ds-radius-pill: 999px;

  /* ── Тени (мягкие, многослойные — как в iOS) ───────────────────────────── */
  --ds-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.06);
  --ds-shadow-2: 0 2px 16px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.04);
  --ds-shadow-3: 0 8px 32px rgba(0, 0, 0, 0.10);
  --ds-shadow-accent: 0 8px 24px rgba(0, 122, 255, 0.42), 0 2px 8px rgba(0, 0, 0, 0.12);

  /* ── Материалы (translucent bars — навбары, таббары, заголовки) ────────── */
  --ds-material-thin:    rgba(255, 255, 255, 0.72);
  --ds-material-regular: rgba(255, 255, 255, 0.86);
  --ds-material-thick:   rgba(255, 255, 255, 0.94);
  --ds-blur-thin:    saturate(140%) blur(16px);
  --ds-blur-regular: saturate(160%) blur(20px);

  /* ── Анимации ──────────────────────────────────────────────────────────── */
  --ds-dur-fast: 0.12s;
  --ds-dur:      0.20s;
  --ds-dur-slow: 0.32s;
  --ds-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ds-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ── Тач-цель (Apple HIG: минимум 44×44pt) ─────────────────────────────── */
  --ds-tap: 44px;

  /* ── Типографика (Dynamic Type → rem, база 16px) ───────────────────────── */
  --ds-fs-large-title: 2.125rem;  --ds-lh-large-title: 1.12;
  --ds-fs-title-1:     1.75rem;    --ds-lh-title-1: 1.15;
  --ds-fs-title-2:     1.375rem;   --ds-lh-title-2: 1.2;
  --ds-fs-title-3:     1.25rem;    --ds-lh-title-3: 1.25;
  --ds-fs-headline:    1.0625rem;  --ds-lh-headline: 1.3;
  --ds-fs-body:        1.0625rem;  --ds-lh-body: 1.4;
  --ds-fs-callout:     1rem;
  --ds-fs-subhead:     0.9375rem;
  --ds-fs-footnote:    0.8125rem;
  --ds-fs-caption-1:   0.75rem;
  --ds-fs-caption-2:   0.6875rem;
}

/* ── Опциональная тёмная тема (готова, но включается вручную:
 *    <html data-ds-appearance="dark"> или .ds-dark). НЕ авто по ОС, чтобы
 *    не ломать светлые экраны, которые ещё не переведены на токены. ─────── */
[data-ds-appearance="dark"], .ds-dark {
  --ds-bg:        #000000;
  --ds-bg-subtle: #1c1c1e;
  --ds-surface:   #1c1c1e;
  --ds-surface-2: #2c2c2e;
  --ds-label:           #f5f5f7;
  --ds-label-secondary: #98989f;
  --ds-label-tertiary:  #6c6c70;
  --ds-separator:        rgba(255, 255, 255, 0.12);
  --ds-separator-strong: rgba(255, 255, 255, 0.20);
  --ds-fill:             #2c2c2e;
  --ds-hairline:         rgba(255, 255, 255, 0.08);
  --ds-material-thin:    rgba(30, 30, 32, 0.72);
  --ds-material-regular: rgba(30, 30, 32, 0.86);
  --ds-material-thick:   rgba(30, 30, 32, 0.94);
  --ds-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ds-shadow-2: 0 2px 16px rgba(0, 0, 0, 0.5);
  --ds-shadow-3: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* ============================================================================
 *  Утилиты (opt-in). Применяются только там, где явно навесили класс.
 * ========================================================================== */

/* — Типографика — */
.ds-large-title { font-size: var(--ds-fs-large-title); line-height: var(--ds-lh-large-title); font-weight: 800; letter-spacing: -0.022em; color: var(--ds-label); }
.ds-title-1 { font-size: var(--ds-fs-title-1); line-height: var(--ds-lh-title-1); font-weight: 800; letter-spacing: -0.02em; color: var(--ds-label); }
.ds-title-2 { font-size: var(--ds-fs-title-2); line-height: var(--ds-lh-title-2); font-weight: 800; letter-spacing: -0.01em; color: var(--ds-label); }
.ds-title-3 { font-size: var(--ds-fs-title-3); line-height: var(--ds-lh-title-3); font-weight: 700; color: var(--ds-label); }
.ds-headline { font-size: var(--ds-fs-headline); line-height: var(--ds-lh-headline); font-weight: 600; color: var(--ds-label); }
.ds-body { font-size: var(--ds-fs-body); line-height: var(--ds-lh-body); color: var(--ds-label); }
.ds-subhead { font-size: var(--ds-fs-subhead); color: var(--ds-label-secondary); }
.ds-footnote { font-size: var(--ds-fs-footnote); color: var(--ds-label-secondary); }
.ds-caption { font-size: var(--ds-fs-caption-1); color: var(--ds-label-secondary); }

/* — Карточка (сгруппированная ячейка iOS) — */
.ds-card {
  background: var(--ds-surface);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-2);
  border: none;
}

/* — Полупрозрачная панель (навбар/таббар/заголовок) — */
.ds-bar {
  background: var(--ds-material-regular);
  -webkit-backdrop-filter: var(--ds-blur-regular);
  backdrop-filter: var(--ds-blur-regular);
  border-color: var(--ds-separator);
}

/* — Разделитель-волосок — */
.ds-separator { border-bottom: 1px solid var(--ds-separator); }

/* — Кнопки — */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
  min-height: var(--ds-tap);
  padding: 0 var(--ds-space-4);
  border-radius: var(--ds-radius-md);
  font-family: var(--ds-font);
  font-size: var(--ds-fs-headline);
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), background-color var(--ds-dur) var(--ds-ease);
}
.ds-btn:active { transform: scale(0.97); }
.ds-btn--primary { background: var(--ds-primary); color: var(--ds-label-on-accent); box-shadow: var(--ds-shadow-1); }
.ds-btn--primary:hover { color: var(--ds-label-on-accent); }
.ds-btn--tinted { background: color-mix(in srgb, var(--ds-blue) 12%, transparent); color: var(--ds-blue); }
.ds-btn--ghost { background: transparent; color: var(--ds-blue); }
.ds-btn--danger { background: var(--ds-danger-bg); color: var(--ds-danger-fg); }

/* — Пилюли статусов — */
.ds-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--ds-radius-pill);
  font-size: var(--ds-fs-caption-1); font-weight: 700;
  background: var(--ds-fill); color: #3a3a3c; border: 1px solid var(--ds-hairline);
}
.ds-pill--success { background: var(--ds-success-bg); color: var(--ds-success-fg); border-color: var(--ds-success-bd); }
.ds-pill--warning { background: var(--ds-warning-bg); color: var(--ds-warning-fg); border-color: var(--ds-warning-bd); }
.ds-pill--danger  { background: var(--ds-danger-bg);  color: var(--ds-danger-fg);  border-color: var(--ds-danger-bd); }

/* — Гарантия тач-цели — */
.ds-tap { min-width: var(--ds-tap); min-height: var(--ds-tap); }

/* — Уважение к «уменьшить движение» — */
@media (prefers-reduced-motion: reduce) {
  .ds-btn, .ds-btn:active { transition: none; transform: none; }
}

/* ============================================================================
 *  Эталонные экраны (реализация токенов — не дублировать стили здесь)
 *
 *  Личный кабинет (v8b-banners): templates/cabinet.html
 *    .cab-ios-card, .cab-compact-details, .cabinet-tabbar, .cab-schedule-banner
 *    Контракт: .cursor/rules/cabinet-mobile-layout.mdc
 *
 *  Вход (ds-v2): templates/login.html
 *    .login-app, .login-ios-card, .login-fields, .login-submit
 *
 *  Регистрация (ds-v2): templates/register.html
 *    .register-app, .register-ios-card, .register-fields, .register-submit
 *
 *  Чаты mobile (v6): templates/chats.html @media (max-width: 767.98px)
 *    Контракт: .cursor/rules/chat-mobile-keyboard.mdc
 * ========================================================================== */