/* WDB Club — токены дизайн-системы.
   Источники: сайт клуба wdbclub.com (цвета, кнопка-«лепесток», свечение, Tilda Sans),
   Mercedes-Benz Community (узкая антиква, карточка машины, тонкие линии, воздух) и
   согласованные макеты первого этапа (mockups/stage-1.html).
   Где используется каждый токен — на живой странице design-system.html.
   Новый токен — только после согласования владельца (CLAUDE.md). */
:root {
  /* ---------- цвет ---------- */
  --bg: #FAFAFA;                      /* фон экрана (сайт) */
  --surface: #FFFFFF;                 /* карточка машины, шторка, таб-бар */
  --ink: #000000;                     /* основной текст, сильная линейка, активная вкладка */
  --ink-2: rgba(0, 0, 0, .5);         /* второстепенный текст (сайт) */
  --ink-3: rgba(0, 0, 0, .28);        /* подсказка в поле, неактивное */
  --hair: rgba(0, 0, 0, .12);         /* тонкие линии строк */
  --acc: #FFDA1F;                     /* жёлтый клуба: основная кнопка, отметки */
  --acc-glow: rgba(255, 218, 31, .5); /* свечение основной кнопки (сайт) */
  --acc-wash: #FFF4BF;                /* светло-жёлтый конец градиента подложки (сайт) */
  --graphite: #2F2E2E;                /* тёмные элементы: тост, вторичная кнопка (сайт) */
  --on-dark: #FFFFFF;                 /* текст на графите */
  --sand: #E5E3DF;                    /* подложка плиток без фото (сайт) */
  --alert: #B42318;                   /* ошибка в форме */
  --scrim: rgba(0, 0, 0, .4);         /* затемнение под шторкой */

  /* ---------- шрифт ---------- */
  --serif: "Oranienbaum", "Times New Roman", serif;
  --sans: "Tilda Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---------- форма ---------- */
  --leaf: 30px 6px;       /* основная и вторичная кнопка, плашка предложения (сайт) */
  --leaf-s: 14px 3px;     /* тег статуса, бейдж, превью машины */
  --r-card: 16px;         /* карточка машины снаружи */
  --r-card-in: 11px;      /* карточка машины внутри рамки */
  --r-sheet: 24px;        /* нижняя шторка */
  --r-plate: 4px;         /* номерной знак */
  --cut: polygon(0 16%, 100% 0, 100% 100%, 0 100%); /* скос верхнего края фото */

  /* ---------- отступы ---------- */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;          /* боковой отступ экрана */
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;

  /* ---------- тень и движение ---------- */
  --shadow-card: 0 1px 0 rgba(0, 0, 0, .06), 0 16px 32px -18px rgba(0, 0, 0, .45);
  --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, .18);
  --shadow-knob: 0 1px 3px rgba(0, 0, 0, .25);
  --glow: 0 0 20px var(--acc-glow);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;
}