/* ЦКП ckp74.ru: токены дизайн-системы. Единственный источник значений.
   Правила и таблицы: docs/design/design-system.md. Образец: prototype/ds.html.
   Палитра: docs/superpowers/specs/2026-10-18-ckp74-site-design.md, раздел 9. Кнопки, радиусы, форма теней: KittyBox (docs/design/kittybox-reference.md). */
@font-face {
  font-family: "Onest";
  src: url("../fonts/onest-cyrillic-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  src: url("../fonts/onest-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Цвет: бренд */
  --brand: #13388c;
  --brand-deep: #0b2566;
  --accent: #c5531d;
  --accent-light: #e3a646;
  --cta: #ff8a1f;
  --cta-hover: #ff9a3d;
  --cta-light: #ffa338;
  --cta-bright: #ffb454;
  --cta-ink: #6a2800;
  --cta-glow: rgb(255 122 13 / 0.55);
  --blue: #1e3a89;
  --blue-hover: #172e70;
  --blue-ink: #f4f6ff;
  --blue-glow: rgb(30 58 137 / 0.55);
  /* Полоска бюджета: оттенки синего для запчастей, соседние сегменты различаются */
  --seg-cpu: var(--brand-deep);
  --seg-gpu: #3a62bd;
  --seg-board: var(--brand);
  --seg-ram: #6a8fd8;
  --seg-disk: #2a52a8;
  --seg-psu: #8aa6e0;
  --seg-case: #a9bde8;
  --icon-on-white: var(--cta);
  --icon-on-gray: var(--brand);
  --icon-inline: var(--muted);
  --gradient-brand: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  --signal: #b4f03c;
  --signal-glow: rgb(180 240 60 / 0.65);

  /* Цвет: нейтральные */
  --ink: #0f1b33;
  --muted: #4a5670;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --line: #e4e8f0;
  --line-strong: #d6dce8;
  --footer: #1f2a3d;
  --footer-ink: #e8edf7;
  --footer-ink-muted: rgb(232 237 247 / 0.7);
  --tile: #e8eefb;
  --tile-warm: #fdf1e4;
  /* Белое поверх тёмного (синий градиент, hero, подвал) и его прозрачные ступени */
  --on-dark: #ffffff;
  --on-dark-1: rgb(255 255 255 / 0.1);
  --on-dark-2: rgb(255 255 255 / 0.12);
  --on-dark-line: rgb(255 255 255 / 0.16);
  --on-dark-3: rgb(255 255 255 / 0.2);
  --on-dark-4: rgb(255 255 255 / 0.3);
  --on-dark-5: rgb(255 255 255 / 0.6);
  --on-dark-6: rgb(255 255 255 / 0.8);

  /* Цвет: поля, тихие кнопки, ошибка (структура из KittyBox) */
  --field: #eff1f4;
  --field-hover: #e7eaee;
  --soft: #f5f6f8;
  --danger: #b42318;
  --danger-bg: #fdecea;
  --ring: var(--brand);

  /* Шрифт и шкала текста. Других размеров в продукте не бывает. */
  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-caption: 12px;
  --fs-small: 14px;
  --fs-button: 15px;
  --fs-body: 16px;
  --fs-lead: 18px;
  --fs-h4: 20px;
  --fs-h3: 24px;
  --fs-h2: clamp(24px, 2.6vw, 32px);
  --fs-h1: clamp(30px, 3.4vw, 48px);
  --lh-caption: 1.35;
  --lh-small: 1.45;
  --lh-body: 1.5;
  --lh-lead: 1.55;
  --lh-h4: 1.4;
  --lh-h3: 1.33;
  --lh-h2: 1.2;
  --lh-h1: 1.1;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Отступы: одна шкала */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 80px;

  /* Радиусы */
  --r-sm: 8px;
  --r: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Тени одного семейства */
  --shadow-btn: 0 1px 2px rgb(15 27 51 / 0.1), 0 6px 12px -6px rgb(15 27 51 / 0.28);
  --shadow-card: 0 2px 6px rgb(15 27 51 / 0.1), 0 18px 40px -8px rgb(15 27 51 / 0.26);
  --shadow-card-dark: 0 2px 6px rgb(11 37 102 / 0.2), 0 18px 40px -8px rgb(11 37 102 / 0.5);
  --shadow-modal: 0 24px 60px -12px rgb(15 27 51 / 0.45);
  --shadow-tile: 0 8px 18px -8px rgb(4 18 62 / 0.55);
  --shadow-pop: 0 2px 6px rgb(15 27 51 / 0.1), 0 18px 40px -8px rgb(15 27 51 / 0.26);

  /* Движение: длительности и кривые */
  --dur-fast: .15s;
  --dur: .2s;
  --dur-slow: .6s;
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* Размеры: иконки, элементы управления, заглушки, карты, QR, шапка */
  --icon-sm: 18px;
  --icon-md: 20px;
  --icon-btn: 40px;
  --touch: 44px;
  --header-min: 76px;
  --hg-inner-sm: 96px;
  --cta-photo-sm: 104px;
  --cta-photo-xs: 72px;
  --cta-input-min: 160px;
  --ph-h-sm: 110px;
  --ph-h-md: 120px;
  --ph-h-lg: 220px;
  --ph-h-xl: 260px;
  --map-h-sm: 320px;
  --map-h-md: 380px;
  --map-h-lg: 480px;
  --col-contact: 380px;
  --qr: 112px;
  --qr-cell: 128px;

  /* Слои */
  --z-menu: 6;
  --z-header: 30;

  /* Брейкпоинты (в @media переменные не работают, значения для справки и скриптов): телефон, планшет, мобильное меню, широкий */
  --bp-sm: 600px;
  --bp-md: 900px;
  --bp-nav: 1040px;
  --bp-lg: 1240px;

  /* Стекло hero: круг, кнопка 66% диаметра (как на заглушке), иконка 52% кнопки */
  --glass-blur: 6px;
  --glass-bg: rgb(255 255 255 / 0.06);
  --glass-edge: rgb(255 255 255 / 0.38);
  --glass-edge-hi: rgb(255 255 255 / 0.5);
  --glass-header: color-mix(in srgb, var(--brand-deep) 86%, transparent);
  --glass-header-blur: 14px;
  --glass-max: 356px;
  --glass-btn: 66%;
  --glass-icon: 52%;
}

/* Классы типографики: единственный способ задать размер текста */
.t-h1 { font: var(--fw-bold) var(--fs-h1) / var(--lh-h1) var(--font); }
.t-h2 { font: var(--fw-bold) var(--fs-h2) / var(--lh-h2) var(--font); }
.t-h3 { font: var(--fw-semibold) var(--fs-h3) / var(--lh-h3) var(--font); }
.t-h4 { font: var(--fw-semibold) var(--fs-h4) / var(--lh-h4) var(--font); }
.t-lead { font: var(--fw-regular) var(--fs-lead) / var(--lh-lead) var(--font); }
.t-body { font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font); }
.t-small { font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font); }
.t-caption { font: var(--fw-semibold) var(--fs-caption) / var(--lh-caption) var(--font); }