/* ==========================================================================
   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;
  --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-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);
}