/**
 * AboutGOLF Design System — v1.2 (11.08.2026)
 * Источник значений: фактическая вёрстка утверждённого концепта v2.
 * Правило: в вёрстке страниц используются ТОЛЬКО эти переменные.
 * Маппинг старых значений на токены — см. design/STYLEGUIDE.md
 */

:root {
    /* ---------- Цвета: база ---------- */
    --c-ink:     #0F0F0D; /* основной тёмный: текст, тёмные секции */
    --c-paper:   #F6F5F1; /* фон страницы */
    --c-surface: #F1F0EA; /* альтернативный фон, подложки */
    --c-white:   #FFFFFF; /* карточки, текст на тёмном */
    --c-accent:  #F2622E; /* акцент: кнопки, ссылки, маркеры */
    --c-muted:   #5C5C56; /* вторичный текст на светлом */
    --c-faint:   #9A9A92; /* третичный текст, подписи */

    /* ---------- Цвета: прозрачности (фиксированная шкала) ---------- */
    --ink-a06:   rgba(15, 15, 13, 0.06); /* лёгкие подложки */
    --ink-a12:   rgba(15, 15, 13, 0.12); /* тонкие разделители */
    --ink-a20:   rgba(15, 15, 13, 0.20); /* бордеры на светлом */
    --ink-a35:   rgba(15, 15, 13, 0.35); /* оверлеи на фото */
    --ink-a82:   rgba(15, 15, 13, 0.82); /* плотные оверлеи */
    --white-a08: rgba(255, 255, 255, 0.08); /* подложки-пятна на тёмном (табы, чипы) */
    --white-a15: rgba(255, 255, 255, 0.15); /* тонкие бордеры на тёмном */
    --white-a25: rgba(255, 255, 255, 0.25); /* бордеры на тёмном */
    --white-a45: rgba(255, 255, 255, 0.45); /* приглушённый текст на тёмном */
    --white-a75: rgba(255, 255, 255, 0.75); /* вторичный текст на тёмном */
    --white-a95: rgba(255, 255, 255, 0.95); /* почти белые подложки */

    /* ---------- Типографика ---------- */
    --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* шкала размеров (7 ступеней) */
    --fs-100: 13px;  /* мелкий текст, мета, капс-ярлыки */
    --fs-200: 14px;  /* UI, кнопки, навигация */
    --fs-300: 16px;  /* базовый текст */
    --fs-400: 18px;  /* лид-абзацы */
    --fs-500: 20px;  /* подзаголовки карточек */
    --fs-600: 24px;  /* заголовки карточек */
    --fs-700: 28px;  /* малые заголовки секций */

    /* display-размеры (флюидные) */
    --fs-d1: clamp(38px, 6.6vw, 108px); /* hero */
    --fs-d2: clamp(30px, 4.2vw, 58px);  /* заголовки секций */
    --fs-d3: clamp(24px, 3vw, 40px);    /* подзаголовки секций */

    /* насыщенность */
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-heavy:    800;

    /* межстрочные */
    --lh-display: 1.05;
    --lh-heading: 1.3;
    --lh-ui:      1.4;
    --lh-body:    1.6;

    /* межбуквенные */
    --ls-display: -0.035em; /* display-заголовки */
    --ls-heading: -0.02em;  /* обычные заголовки */
    --ls-body:    0;
    --ls-wide:    0.04em;   /* кнопки, ярлыки */
    --ls-caps:    0.16em;   /* капс-надписи (eyebrow) */

    /* ---------- Отступы (база 4px) ---------- */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-14: 56px;
    --sp-16: 64px;
    --sp-24: 96px;

    /* ---------- Радиусы ---------- */
    /* Правило: у кнопок одно скругление (pill), у карточек одно (card).
       sm — служебный, только для вложенных элементов: внутренний радиус
       должен быть меньше внешнего примерно на паддинг, иначе углы спорят. */
    --r-sm:    14px;  /* вложенные элементы, инпуты */
    --r-card:  28px;  /* все карточки, секции, медиа-блоки */
    --r-pill:  999px; /* кнопки, бейджи */
    --r-round: 50%;   /* круги, аватары */

    /* ---------- Тени ---------- */
    /* card — карточки на фоне; pop — всплывающие слои (выпадающие меню,
       hover карточек-ссылок). Вторая тень фактически была в v2 (в JS-коде
       выпадашек), поэтому узаконена отдельным токеном. Третьей не заводить. */
    --shadow-card: 0 2px 26px rgba(20, 20, 15, 0.06);
    --shadow-pop:  0 18px 44px rgba(15, 15, 13, 0.14);

    /* ---------- Границы ---------- */
    /* Одна тёмная линия, одна белая + акцентная рамка 2px цветом по месту. */
    --border-dark:  1px solid var(--ink-a20);
    --border-light: 1px solid var(--white-a25);

    /* ---------- Кнопки и чипы (компонентные токены) ---------- */
    /* Было 8 вариантов паддингов у пилюль → два размера кнопки + чип.
       Текст кнопок: fs-200 / 600 / ls-wide. */
    --btn-pad-lg: 16px 30px; /* основная кнопка */
    --btn-pad-md: 12px 26px; /* компактная кнопка */
    --chip-pad:   8px 14px;  /* чипы, бейджи */

    /* ---------- Эффекты ---------- */
    --blur-glass: blur(6px); /* стеклянные подложки: шапка, бейджи */

    /* ---------- Сетка ---------- */
    --container: 1280px;
    --gutter:    24px; /* боковые поля; на мобильном 16px */
}

/* Иконки и мелкие фикс-элементы: только сетка 8 / 16 / 24 / 32 / 40 / 56px
   (точки-маркеры → 8; мелкие иконки → 16/24; иконки карточек → 32/40;
   аватары/лого → 56). Промежуточных размеров не заводить. */

/* Брейкпоинты (в media-запросах, для справки):
   — 900px  : планшет/узкий десктоп
   — 520px  : мобильный
   Значения сохранены из проверенного адаптива v2. */