/* Noircraft Lab 2026 - design tokens. GENERATED by tools/build-tokens.mjs from tools/tokens.json. Do not edit by hand. */
/* Source: Главная 5a/5b (итерация 5, вариант A, 11.10.2026) и BRAND.md rev.2 */
:root {
  /* Color */
  --bg: #0d0d0d; /* Фон страницы и секций. Основа бренда. */
  --surface: #111111; /* Фон карточек, плашек, полосы калькулятора, плиток контактов. */
  --surface-raised: #151515; /* Верх градиента карточки пакета (сверху surface-raised, снизу surface). */
  --surface-stack-1: #161616; /* Ближняя копия под карточкой шага (стопка, сдвиг 8 px). */
  --surface-stack-2: #121212; /* Дальняя копия под карточкой шага (стопка, сдвиг 16 px). */
  --surface-stack-pk: #141414; /* Копия под рекомендуемым пакетом (сдвиг 12 px). */
  --cover-empty: #1a1a1a; /* Подложка обложки кейса, пока скрин не загрузился. */
  --ink: #f0ede8; /* Основной текст и заголовки на bg и surface. Плашка обычной кнопки. */
  --muted: #9a9a9a; /* Подписи, вторичный текст, eyebrow, метки на bg и surface (контраст 7:1 и выше). */
  --gold: #e8c94a; /* Единственное золото: рамки, линии, оси, узлы, свечение - в любом блоке. Заливкой (плашка кнопки, метка, золотой текст) - одно на блок. */
  --on-gold: #0d0d0d; /* Текст и знаки поверх заливки gold: подпись кнопки при наведении, метка «Рекомендую». */
  --line: rgba(240,237,232,0.14); /* Граница карточек пакетов, кейсов, контактов, фактов. */
  --line-strong: rgba(240,237,232,0.28); /* Граница тела кнопки в покое. */
  --line-soft: rgba(240,237,232,0.10); /* Разделитель внутри карточки (низ пакета). */
  --line-faint: rgba(240,237,232,0.12); /* Разделители FAQ, граница полосы калькулятора. */
  --line-glass: rgba(240,237,232,0.20); /* Граница стеклянной панели на обложке кейса. */
  --line-glass-soft: rgba(240,237,232,0.16); /* Граница стеклянного блока (доповнення) и фактов поверх фото. */
  --gold-line: rgba(232,201,74,0.55); /* Рамка карточки услуги и карточки шага в покое. */
  --gold-line-strong: rgba(232,201,74,0.70); /* Рамка рекомендуемого пакета, короткие перемычки к оси шагов. */
  --gold-line-hover: rgba(232,201,74,0.85); /* Рамка карточки услуги при наведении. */
  --gold-line-plate: rgba(232,201,74,0.60); /* Рамка плашки номера шага, граница кнопки при наведении. */
  --gold-line-band: rgba(232,201,74,0.35); /* Линии сверху и снизу бегущей строки. */
  --gold-line-stack: rgba(232,201,74,0.28); /* Рамка ближней копии в стопке шага. */
  --gold-line-stack-far: rgba(232,201,74,0.18); /* Рамка дальней копии в стопке шага. */
  --gold-line-stack-pk: rgba(232,201,74,0.22); /* Рамка копии под рекомендуемым пакетом. */
  --gold-line-icon: rgba(232,201,74,0.50); /* Рамка квадрата значка в карточке услуги. */
  --glass: rgba(17,17,17,0.72); /* Заливка стеклянного блока (доповнення к пакетам). */
  --glass-panel: rgba(17,17,17,0.66); /* Заливка стеклянной панели на обложке кейса, 1360. С blur 14 px. */
  --glass-panel-m: rgba(17,17,17,0.80); /* Заливка панели кейса на 390, где панель под скрином. */
  --icon-fill: rgba(13,13,13,0.70); /* Заливка квадрата значка в карточке услуги. */
  --scrim-fact: rgba(17,17,17,0.78); /* Заливка фактов поверх фото в блоке «Про мене». */
  --grid-dot: rgba(240,237,232,0.06); /* Точка фоновой сетки страницы: 1 px, шаг 22 px. */
  /* Type families */
  --font-serif: Georgia, Gelasio, 'Times New Roman', serif;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-script: 'Aguafina Script', cursive; /* only the words on the facets of the Hero lockup */
  /* Spacing */
  --space-4: 4px; /* Отступ плашки кнопки от края тела. */
  --space-8: 8px; /* Сдвиг ближней копии в стопке. */
  --space-12: 12px; /* Зазор между фактами, сдвиг копии пакета. */
  --space-16: 16px; /* Зазор плиток контактов; сдвиг дальней копии; внутренний отступ фактов. */
  --space-20: 20px; /* Боковое поле секции на 390; отступ стеклянной панели от края обложки. */
  --space-24: 24px; /* Внутренний отступ пакета на 390. */
  --space-28: 28px; /* Зазор сетки услуг и пакетов на 1360. */
  --space-32: 32px; /* Внутренний отступ карточки услуги и пакета на 1360; зазор сетки кейсов. */
  --space-40: 40px; /* Отступ от заголовка секции до содержимого. */
  --space-56: 56px; /* Верхнее поле секции на 390. */
  --space-80: 80px; /* Боковое поле секции на 1360. */
  --space-96: 96px; /* Верхнее поле секции на 1360. */
  /* Radius */
  --radius-8: 8px; /* Плашка кнопки, метка «Рекомендую». */
  --radius-10: 10px; /* Плашка номера шага. */
  --radius-12: 12px; /* Тело кнопки, квадрат значка, факты. */
  --radius-14: 14px; /* Стеклянная панель кейса, плитка контакта. */
  --radius-16: 16px; /* Карточки услуг, пакетов, шагов, полоса калькулятора, стекло. */
  --radius-18: 18px; /* Карточка кейса на 1360. */
  --radius-round: 50%; /* Узел на оси шагов. */
  /* Glow and shadow */
  --glow-main: 0 0 0 1px rgba(232,201,74,0.10), 0 0 28px rgba(232,201,74,0.30); /* Свечение основной кнопки. Только одна основная кнопка в блоке. */
  --glow-btn-hover: 0 0 22px rgba(232,201,74,0.24); /* Свечение обычной кнопки при наведении. */
  --glow-card: 0 0 0 1px rgba(232,201,74,0.08), 0 0 34px rgba(232,201,74,0.18); /* Карточка услуги в покое. */
  --glow-card-hover: 0 0 0 1px rgba(232,201,74,0.20), 0 0 44px rgba(232,201,74,0.32), 0 24px 44px -20px rgba(232,201,74,0.45); /* Карточка услуги при наведении, вместе с подъёмом на 4 px. */
  --glow-featured: 0 0 0 1px rgba(232,201,74,0.10), 0 0 40px rgba(232,201,74,0.22), 0 24px 50px rgba(0,0,0,0.5); /* Рекомендуемый пакет. */
  --glow-step: 0 0 30px rgba(232,201,74,0.16); /* Карточка шага. */
  --glow-plate: 0 0 20px rgba(232,201,74,0.22); /* Плашка номера шага. */
  --glow-axis: 0 0 14px rgba(232,201,74,0.65), 0 0 36px rgba(232,201,74,0.30); /* Вертикальная ось шагов, 2 px. */
  --glow-node: 0 0 16px rgba(232,201,74,0.85); /* Узел на оси шагов, 16 px. */
  --glow-bullet: 0 0 6px rgba(232,201,74,0.7); /* Золотая черта-маркер списка в пакете. */
  --glow-faq: -10px 0 18px -14px rgba(232,201,74,0.8); /* Левая золотая черта открытого вопроса FAQ. */
  --shadow-stack: 0 18px 40px rgba(0,0,0,0.55); /* Ближняя копия в стопке шага. */
  --shadow-glass: inset 0 1px 0 rgba(240,237,232,0.06), 0 20px 50px rgba(0,0,0,0.45); /* Стеклянный блок. */
  --shadow-panel: 0 14px 34px rgba(0,0,0,0.45); /* Стеклянная панель на обложке кейса. */
  --text-glow-hero: 0 0 36px rgba(232,201,74,0.30); /* text-shadow заголовка Hero. */
  --text-glow-h2: 0 0 28px rgba(232,201,74,0.22); /* text-shadow заголовка секции. */
  --text-glow-gold: 0 0 22px rgba(232,201,74,0.30); /* text-shadow золотого текста (одного на блок). */
}

/* Type styles (from tokens.json "type.groups"), as utility classes */
.t-hero-title { font-family: var(--font-serif); font-size: 58px; line-height: 1.06; font-weight: 400; letter-spacing: -0.01em; }
.t-hero-title-m { font-family: var(--font-serif); font-size: 34px; line-height: 1.12; font-weight: 400; }
.t-section-title { font-family: var(--font-serif); font-size: 40px; line-height: 1.1; font-weight: 400; }
.t-section-title-m { font-family: var(--font-serif); font-size: 30px; line-height: 1.15; font-weight: 400; }
.t-price { font-family: var(--font-serif); font-size: 48px; line-height: 1; font-weight: 400; }
.t-step-number { font-family: var(--font-serif); font-size: 40px; line-height: 1.1; font-weight: 400; }
.t-greeting { font-family: var(--font-serif); font-size: 30px; line-height: 1.2; font-weight: 400; }
.t-card-title { font-family: var(--font-serif); font-size: 28px; line-height: 1.2; font-weight: 400; }
.t-lead { font-family: var(--font-serif); font-size: 26px; line-height: 1.3; font-weight: 400; }
.t-work-name { font-family: var(--font-serif); font-size: 26px; line-height: 1.15; font-weight: 400; }
.t-faq-question { font-family: var(--font-serif); font-size: 21px; line-height: 1.3; font-weight: 400; }
.t-eyebrow { font-family: var(--font-serif); font-size: 13px; line-height: 1.3; font-weight: 700; letter-spacing: 0.18em; }
.t-subtitle { font-family: var(--font-sans); font-size: 18px; line-height: 1.5; font-weight: 400; }
.t-body-lg { font-family: var(--font-sans); font-size: 17px; line-height: 1.6; font-weight: 400; }
.t-body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 400; }
.t-small { font-family: var(--font-sans); font-size: 15px; line-height: 1.45; font-weight: 400; }
.t-caption { font-family: var(--font-sans); font-size: 14px; line-height: 1.4; font-weight: 400; }
.t-button { font-family: var(--font-sans); font-size: 15px; line-height: 1; font-weight: 600; }
.t-label { font-family: var(--font-sans); font-size: 12px; line-height: 1.3; font-weight: 600; letter-spacing: 0.12em; }