/* Copyright (C) 2025-2026 adcitymag.ru */
/* ==========================================================================
   AdCityMag: токены дизайн-системы (три уровня)
   1) Базовые (global): сырые значения шкал. Меняются редко, это решения бренда.
   2) Смысловые (semantic): «зачем» значение нужно. На них ссылаются компоненты.
   3) Компонентные (component): значения конкретных компонентов.
   В компонентах не используем «голые» цвета, пиксели и z-index: только токены.
   Описание и правила: DESIGN-SYSTEM.md
   ========================================================================== */

:root {
  /* ---------- 1. Базовые токены ---------- */

  /* шкала отступов (шаг 4 px) */
  --adcm-space-1: 4px;
  --adcm-space-2: 8px;
  --adcm-space-3: 12px;
  --adcm-space-4: 16px;
  --adcm-space-5: 20px;
  --adcm-space-6: 24px;
  --adcm-space-8: 32px;
  --adcm-space-12: 48px;

  /* скругления */
  --adcm-r-xs: 4px;
  --adcm-r-sm: 8px;
  --adcm-r-md: 12px;
  --adcm-r-lg: 16px;
  --adcm-r-xl: 20px;
  --adcm-r-2xl: 28px;
  --adcm-r-circle: 50%;
  --adcm-r-pill: 999px;

  /* подъём: тени по уровням */
  --adcm-shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
  --adcm-shadow-2: 0 6px 18px rgba(0, 0, 0, .12);
  --adcm-shadow-3: 0 12px 28px rgba(0, 0, 0, .18);
  --adcm-shadow-4: 0 18px 44px rgba(0, 0, 0, .28);

  /* слои (чем больше число, тем выше) */
  --adcm-z-below: -1;
  --adcm-z-base: 1;
  --adcm-z-raised: 2;
  --adcm-z-overlay: 998;      /* затемнение под выезжающим меню */
  --adcm-z-drawer: 999;       /* выезжающее меню */
  --adcm-z-modal: 300;        /* окна и всплывающие подсказки */
  --adcm-z-bottombar: 1002;   /* нижняя панель телефона: выше меню, чтобы закрывать его */
  --adcm-z-skip: 1000;        /* ссылка «перейти к содержимому» */

  /* движение */
  --adcm-dur-fast: .15s;
  --adcm-dur-base: .22s;
  /* крупные заголовки (в px, не зависят от корня 19 px) */
  --t-d1: 28px;
  --t-d2: 32px;
  --t-d3: 40px;
  --t-d4: 48px;
  --t-fluid-1: clamp(26px, 4vw, 36px);
  --t-fluid-2: clamp(28px, 4vw, 42px);
  --t-fluid-3: clamp(32px, 5vw, 48px);

  --adcm-ease: cubic-bezier(.22, .61, .36, 1);

  /* ---------- 2. Смысловые токены ---------- */

  /* поверхности и текст берутся из переменных темы (светлая/тёмная переключаются сами) */
  --adcm-surface: var(--lightColor);
  --adcm-surface-muted: var(--greyBg);
  --adcm-text: var(--mainColor);
  --adcm-text-muted: var(--adcmMuted, var(--greyColor));
  --adcm-border: var(--borderColor);
  --adcm-focus: var(--hoverColor, currentColor);

  /* акцент и сообщения: подобраны так, чтобы читались на светлом и на тёмном */
  --adcm-accent: #c2410c;
  --adcm-success: #15803d;
  --adcm-warning: #b45309;
  --adcm-danger: #b91c1c;
  --adcm-input-border: #8c90a3;          /* рамка полей ввода: контраст 3:1 к фону (WCAG 1.4.11) */
  /* базовая палитра акцентов: значения те же, что были разбросаны по стилям */
  --adcm-c-blue: #3b82f6;
  --adcm-c-green: #10b981;
  --adcm-c-amber: #f59e0b;
  --adcm-c-red: #ef4444;
  --adcm-c-white: #fff;
  /* расширенная палитра: значения те же, что были разбросаны по стилям (названия по шкале Tailwind) */
  --adcm-c-amber-400: #fbbf24;
  --adcm-c-amber-600: #d97706;
  --adcm-c-black: #000;
  --adcm-c-blue-200: #acf;
  --adcm-c-blue-600: #2563eb;
  --adcm-c-blue-900: #1e3a8a;
  --adcm-c-brand-red: #c0392b;
  --adcm-c-card-dark: #181818;
  --adcm-c-emerald-600: #059669;
  --adcm-c-gray-100: #ededed;
  --adcm-c-gray-50: #f6f7fb;
  --adcm-c-gray-500: #6b7280;
  --adcm-c-gray-800: #1f2937;
  --adcm-c-green-600: #16a34a;
  --adcm-c-ink: #222222;
  --adcm-c-ink-dark: #0f0f0f;
  --adcm-c-orange-400: #fb923c;
  --adcm-c-orange-600: #ea580c;
  --adcm-c-red-600: #dc2626;
  --adcm-c-sky-400: #4da3ff;
  --adcm-c-wp-blue: #0073aa;
  --adcm-c-wp-blue-dark: #005a87;
  --adcm-on-media: #fff;                 /* текст поверх фото */
  --adcm-scrim: rgba(0, 0, 0, .62);      /* подложка под текстом поверх фото */

  /* ---------- 3. Компонентные токены ---------- */
  --adcm-card-radius: var(--adcm-r-lg);
  --adcm-card-gap: var(--adcm-space-5);
  --adcm-chip-height: 38px;
  --adcm-chip-radius: var(--adcm-r-pill);
  --adcm-tap-target: 44px;               /* минимальный размер цели для пальца */
}

html:root[data-theme="dark"] {
  --adcm-accent: #fb923c;
  --adcm-success: #4ade80;
  --adcm-warning: #fbbf24;
  --adcm-danger: #f87171;
  --adcm-input-border: #7a7f99;
  --adcm-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --adcm-shadow-2: 0 6px 18px rgba(0, 0, 0, .45);
  --adcm-shadow-3: 0 12px 28px rgba(0, 0, 0, .55);
  --adcm-shadow-4: 0 18px 44px rgba(0, 0, 0, .65);
}