/* Токены дизайна citadelprava.ru — единственный источник цвета, шрифта и ритма.
   Основа — палитра макета (Claude Design, «Broadsheet») с исправленным золотом:
   #A9793F в макете давал 3,48:1 на кремовом и 2,06–3,82:1 под белым текстом.
   Числа контраста — измерены contrast.py, таблица в design/README.md.
   Правило: выбирать токен по СМЫСЛУ (text-muted для подписи, gold-text для акцентного
   текста), а не по похожему цвету. Хексы в компонентах запрещены. */

:root {
  /* ---------- Цвет: фон и поверхности ---------- */
  --color-bg-dark: #1f1a19;        /* тёмные секции: шапка, hero, футер */
  --color-bg-dark-deep: #120b0a;   /* нижний край градиента тёмных секций */
  --color-bg-cream: #f7f4ee;       /* фон страницы */
  --color-bg-cream-alt: #f6f2eb;   /* чередование секций */
  --color-surface: #ffffff;        /* карточки, форма, панель */
  --color-surface-sand: #ede6de;   /* бордюры, разделители, плашки */
  --color-divider: rgba(31, 26, 25, 0.12);
  --color-divider-on-dark: rgba(247, 244, 238, 0.14);

  /* ---------- Цвет: текст ---------- */
  --color-text: #1f1a19;           /* основной текст на светлом — 15,68:1 на кремовом */
  --color-text-body: #3d3735;      /* длинные абзацы */
  --color-text-muted: #5b5450;     /* подписи, описания карточек — 6,76:1 на кремовом */
  --color-text-subtle: #6b5f5a;    /* второстепенное на белом — 6,16:1 */
  --color-text-on-dark: #ede6de;   /* текст на тёмном — 13,91:1 */
  --color-text-on-dark-muted: #bfb4a8; /* подписи на тёмном */

  /* ---------- Цвет: золото (акцент) ----------
     gold-text     — акцентный ТЕКСТ на светлом (заголовки карточек, ссылки, цифры)
     gold-text-small — мелкий акцентный текст (реквизиты, подписи) — 6,06:1
     gold-surface  — ПОВЕРХНОСТИ и декор (линии eyebrow, рамки, иконки); как цвет мелкого
                     текста на светлом ЗАПРЕЩЁН (3,48:1); допустим для заголовков ≥ 24px
     gold-light    — светлое золото: фон кнопок, под ТЁМНЫМ текстом — 8,37:1
     gold-on-dark  — золото на тёмном фоне (eyebrow, цифры в hero) — 7,37:1 */
  --color-gold-text: #8a6230;
  --color-gold-text-small: #7a5528;
  --color-gold-surface: #a9793f;
  --color-gold-light: #d4af7a;
  --color-gold-on-dark: #c9a468;
  --color-on-gold: #1f1a19;        /* единственный цвет текста на золотых поверхностях */

  /* ---------- Цвет: состояния ---------- */
  --color-focus: #2f6fdd;          /* кольцо фокуса — заметно и на кремовом, и на тёмном */
  --color-error: #a8321f;          /* ошибка поля — 6,09:1 на кремовом */
  --color-success: #2f6b3a;        /* успех формы */
  --color-link: var(--color-gold-text);
  --color-link-hover: var(--color-text);

  /* ---------- Шрифты ---------- */
  --font-display: "Noto Serif Display", "Times New Roman", Georgia, serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-numbers: "Bricolage Grotesque", "Segoe UI", Arial, sans-serif;

  /* Шкала: измеренные размеры макета на 1440px, заголовки — fluid до мобильных */
  --text-h1: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem);   /* 40 → 68px */
  --text-h2: clamp(2rem, 1.4rem + 2vw, 3rem);          /* 32 → 48px */
  --text-h3: 1.5rem;                                    /* 24px */
  --text-stat: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);   /* 32 → 44px, Bricolage */
  --text-lead: 1.125rem;                                /* 18px */
  --text-quote: 1.1875rem;                              /* 19px */
  --text-body: 1rem;                                    /* 16px — тело страниц */
  --text-ui: 0.9375rem;                                 /* 15px — поля, пункты списков */
  --text-small: 0.875rem;                               /* 14px — подписи карточек */
  --text-caption: 0.75rem;                              /* 12px — реквизиты; только muted/gold-text-small */
  --text-eyebrow: 0.8125rem;                            /* 13px, разрядка 0.12em, капитель */

  --leading-tight: 1.1;
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --tracking-eyebrow: 0.12em;

  /* ---------- Ритм: 4px сетка ---------- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --section-y: clamp(3rem, 2rem + 4vw, 6rem);   /* вертикальный отступ секций 48 → 96 */
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);    /* боковой отступ 16 → 32 */
  --container: 80rem;                            /* 1280px контент + gutter */
  --measure: 65ch;                               /* ширина строки текста */

  /* ---------- Форма ---------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(31, 26, 25, 0.10);
  --shadow-md: 0 4px 14px rgba(31, 26, 25, 0.10);
  --shadow-lg: 0 12px 32px rgba(31, 26, 25, 0.16);
  --border: 1px solid var(--color-divider);

  /* ---------- Движение ---------- */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---------- Цели касания ---------- */
  --target-min: 44px;   /* WCAG 2.5.8 требует 24px; на мобильных держим 44 */

  /* ---------- Брейкпоинты (справочно; в CSS используются числами) ----------
     --bp-sm: 480px  --bp-md: 768px  --bp-lg: 1024px  --bp-xl: 1280px */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
}