/* Sunsong Russia — design tokens
   Источник: sunsongrussia.ru (Tilda, снято 2026-10-28). Описание и правила — README.md.
   Подключение: <link rel="stylesheet" href="design-system/tokens.css"> или вставить целиком в <style>. */

/* ---------- Шрифты бренда (файлы лежат на CDN Tilda проекта 4276531) ---------- */
@font-face { font-family: 'TT'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('https://static.tildacdn.com/tild3063-6234-4462-b566-633934626539/TT_Norms_Pro_Normal.woff') format('woff'); }
@font-face { font-family: 'TT'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('https://static.tildacdn.com/tild3334-3938-4663-b936-366339306530/TT_Norms_Pro_Medium.woff') format('woff'); }
/* 600 — это другой шрифт: TT Firs Neue Medium, им набраны крупные заголовки */
@font-face { font-family: 'TT'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('https://static.tildacdn.com/tild3261-6639-4436-a539-313337623633/TT_Firs_Neue_Medium.woff') format('woff'); }
@font-face { font-family: 'TT'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('https://static.tildacdn.com/tild6266-3137-4637-b361-636333633464/TT_Norms_Pro_Medium.woff') format('woff'); }

:root {
  /* ---------- Цвета: основа ---------- */
  --ss-paper:        #e8e9e9;  /* фон страницы — светлый «стальной» серый */
  --ss-surface:      #ffffff;  /* карточки, поля, контрастные блоки */
  --ss-ink:          #000000;  /* весь текст, линии, рамки кнопок */
  --ss-ink-muted:    rgba(0, 0, 0, 0.5);  /* вторичный текст, подписи */
  --ss-line:         #000000;  /* 1px линии и рамки */
  --ss-line-soft:    rgba(0, 0, 0, 0.2);

  /* ---------- Цвета: тёмные секции ---------- */
  --ss-graphite:     #222222;  /* слайдеры, тёмные полосы */
  --ss-coal:         #171717;  /* подложка подвала */
  --ss-on-dark:      #ffffff;

  /* ---------- Цвета: акценты (дозированно) ---------- */
  --ss-blue:         #2562ba;  /* корпоративный синий: блок контактов/CTA, «наша сторона» на схемах */
  --ss-yellow:       #fff705;  /* сигнальный квадрат-маркер у цифр и ключевых фактов */

  /* ---------- Служебные статусы (для прототипов; на сайте их нет) ---------- */
  --ss-ok:           #199c68;
  --ss-warn:         #fff705;
  --ss-danger:       #d93a2b;

  /* ---------- Металлы коллекций (ПРИБЛИЗИТЕЛЬНО, для схем и плашек; в печать/КП — только фото образцов) ---------- */
  --ss-metal-mirror:         #c9ccce;
  --ss-metal-ecru:           #d8cbb3;
  --ss-metal-brass:          #b59a5b;
  --ss-metal-titanium-gold:  #c8a64b;
  --ss-metal-champagne:      #cbb38a;
  --ss-metal-sh-champagne:   #b9a07a;
  --ss-metal-bronze:         #8a6a45;
  --ss-metal-rose-gold:      #c28f80;
  --ss-metal-coffee:         #5a4536;
  --ss-metal-sh-black:       #2b2b2c;
  --ss-metal-black-titanium: #1d1e20;

  /* ---------- Типографика ---------- */
  --ss-font:         'TT', 'Manrope', Arial, sans-serif;
  --ss-fs-display:   70px;   /* H1 страницы, UPPERCASE, 600 */
  --ss-fs-h2:        42px;   /* крупный заголовок секции */
  --ss-fs-h3:        28px;   /* заголовок блока, UPPERCASE */
  --ss-fs-h4:        20px;   /* подзаголовок/лейбл, UPPERCASE, 500 */
  --ss-fs-lead:      22px;   /* основной текст сайта, 500 */
  --ss-fs-body:      18px;
  --ss-fs-small:     14px;
  --ss-fs-caption:   12px;
  --ss-lh-tight:     1.1;
  --ss-lh-heading:   1.2;
  --ss-lh-body:      1.55;
  --ss-tracking-body: 0.5px;

  /* ---------- Форма ---------- */
  --ss-radius-none:  0;      /* фото, карточки, блоки — всегда прямые углы */
  --ss-radius-pill:  30px;   /* только кнопки и чипы */
  --ss-border:       1px solid var(--ss-line);

  /* ---------- Сетка и отступы ---------- */
  --ss-container:    1200px;
  --ss-gutter:       20px;
  --ss-space-1: 4px;  --ss-space-2: 8px;  --ss-space-3: 12px; --ss-space-4: 16px;
  --ss-space-5: 24px; --ss-space-6: 32px; --ss-space-7: 48px; --ss-space-8: 64px; --ss-space-9: 96px;

  --ss-transition:   0.2s ease-in-out;
}

/* Тёмная тема для артефактов: инвертируем основу, акценты те же */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ss-paper: #171717; --ss-surface: #222222; --ss-ink: #ffffff;
    --ss-ink-muted: rgba(255,255,255,0.6); --ss-line: #ffffff; --ss-line-soft: rgba(255,255,255,0.2);
  }
}
:root[data-theme="dark"] {
  --ss-paper: #171717; --ss-surface: #222222; --ss-ink: #ffffff;
  --ss-ink-muted: rgba(255,255,255,0.6); --ss-line: #ffffff; --ss-line-soft: rgba(255,255,255,0.2);
}

/* ---------- Базовые компоненты ---------- */
.ss-page   { background: var(--ss-paper); color: var(--ss-ink); font-family: var(--ss-font);
             font-size: var(--ss-fs-body); line-height: var(--ss-lh-body); letter-spacing: var(--ss-tracking-body);
             -webkit-font-smoothing: antialiased; margin: 0; }
.ss-container { max-width: var(--ss-container); margin: 0 auto; padding: 0 var(--ss-gutter); box-sizing: border-box; }

.ss-display { font-size: var(--ss-fs-display); font-weight: 600; line-height: var(--ss-lh-tight); text-transform: uppercase; letter-spacing: 0; margin: 0; }
.ss-h2      { font-size: var(--ss-fs-h2); font-weight: 400; line-height: var(--ss-lh-heading); text-transform: uppercase; letter-spacing: 0; margin: 0; }
.ss-h3      { font-size: var(--ss-fs-h3); font-weight: 600; line-height: var(--ss-lh-heading); text-transform: uppercase; letter-spacing: 0; margin: 0; }
.ss-label   { font-size: var(--ss-fs-h4); font-weight: 500; line-height: 1.3; text-transform: uppercase; letter-spacing: 0; }
.ss-lead    { font-size: var(--ss-fs-lead); font-weight: 500; }
.ss-muted   { color: var(--ss-ink-muted); }

.ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
          height: 56px; padding: 0 32px; border: var(--ss-border); border-radius: var(--ss-radius-pill);
          background: transparent; color: var(--ss-ink); font: 500 var(--ss-fs-body)/1 var(--ss-font);
          letter-spacing: var(--ss-tracking-body); text-decoration: none; cursor: pointer;
          transition: background-color var(--ss-transition), color var(--ss-transition); }
.ss-btn:hover       { background: var(--ss-ink); color: var(--ss-paper); }
.ss-btn--solid      { background: var(--ss-ink); color: var(--ss-paper); }
.ss-btn--solid:hover{ background: transparent; color: var(--ss-ink); }
.ss-btn--on-accent  { border-color: #fff; color: #fff; }
.ss-btn--on-accent:hover { background: #fff; color: var(--ss-blue); }
.ss-btn--sm         { height: 40px; padding: 0 20px; font-size: var(--ss-fs-small); }

.ss-card   { background: var(--ss-surface); border-radius: var(--ss-radius-none); padding: var(--ss-space-6); }
.ss-stat   { display: flex; flex-direction: column; gap: var(--ss-space-2); }
.ss-stat__value { font-size: var(--ss-fs-display); font-weight: 600; line-height: 1; }
.ss-stat__label { font-size: var(--ss-fs-body); font-weight: 500; }
.ss-marker { display: inline-block; width: 16px; height: 16px; background: var(--ss-yellow); }
.ss-chip   { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: var(--ss-border);
             border-radius: var(--ss-radius-pill); font-size: var(--ss-fs-small); font-weight: 500; }
.ss-section--dark { background: var(--ss-graphite); color: var(--ss-on-dark); }
.ss-section--blue { background: var(--ss-blue); color: #fff; }