/* ============================================================================
   СтальПро — ДИЗАЙН-ТОКЕНЫ, DEMO-направление: V1 «DARK STEEL LUXURY»
   ----------------------------------------------------------------------------
   ДОКАЗАТЕЛЬСТВО механики свопа: тот же uslugi-template.html без единой правки
   HTML переключается на другое направление заменой одного <link href>.
   Значения сняты с design/directions/b-dark-steel-luxury.html (серия v1).

   ⚠ Это ДЕМО токен-механики, а не кандидат на прод: серия v1 не на канонических
   цветах брендбука (жёлтый #FFD600 + #1A2026) — канон реализует tokens.css.
   Реализует тот же контракт словаря, что и tokens.css (см. шапку tokens.css).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Onest:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root{
  /* ---------- ПОВЕРХНОСТИ СТРАНИЦЫ ---------- */
  --bg:            oklch(16% 0.016 242);
  --bg-grid:       transparent;                  /* в этом направлении чертёжной сетки нет */
  --surface:       oklch(20% 0.018 242);
  --surface-alt:   oklch(24% 0.02 242);

  /* ---------- ТЕКСТ ---------- */
  --ink:           oklch(96% 0.008 240);
  --body:          oklch(80% 0.016 240);
  --muted:         oklch(66% 0.018 240);
  --faint:         oklch(50% 0.018 240);

  /* ---------- ЛИНИИ ---------- */
  --line:          oklch(55% 0.02 242 / 22%);
  --line-strong:   oklch(60% 0.02 242 / 38%);

  /* ---------- АКЦЕНТ (латунное золото серии v1) ---------- */
  --accent:        oklch(75% 0.12 85);
  --accent-hover:  oklch(85% 0.09 85);
  --on-accent:     oklch(19% 0.02 85);

  /* ---------- ИНВЕРСНАЯ СЕКЦИЯ (на тёмной теме — ещё глубже) ---------- */
  --inverse-bg:      oklch(12.5% 0.015 242);
  --inverse-ink:     oklch(96% 0.008 240);
  --inverse-body:    oklch(80% 0.016 240);
  --inverse-muted:   oklch(62% 0.018 240);
  --inverse-line:    oklch(60% 0.02 242 / 26%);

  /* ---------- СЛУЖЕБНЫЕ ---------- */
  --header-bg:     oklch(16% 0.016 242 / 88%);
  --logo-plate:    oklch(96% 0.008 240);         /* чёрный логотип на тёмном — светлая плашка */
  --scrim:         oklch(12% 0.014 242 / 85%);
  --scrim-ink:     oklch(96% 0.008 240);

  /* ---------- ФОРМЫ И СОСТОЯНИЯ ---------- */
  --field-bg:          oklch(20% 0.018 242);
  --field-border:      oklch(60% 0.02 242 / 45%);
  --field-ink:         oklch(96% 0.008 240);
  --field-placeholder: oklch(60% 0.018 240);
  --focus-ring:        oklch(75% 0.12 85);
  --ok:                oklch(75% 0.12 150);
  --err:               oklch(70% 0.15 28);

  /* ---------- ШРИФТЫ ---------- */
  --font-display:  'Playfair Display', 'Georgia', serif;
  --font-body:     'Onest', 'Segoe UI', sans-serif;
  --font-mono:     'JetBrains Mono', 'Consolas', monospace;
  --w-display:     700;
  --w-display-sub: 600;
  --w-body:        400;
  --w-body-strong: 600;

  /* ---------- ТИПОШКАЛА ---------- */
  --fs-h1:    clamp(2rem, 1.45rem + 2.3vw, 3.3rem);
  --fs-h2:    clamp(1.45rem, 1.2rem + 1.1vw, 2.15rem);
  --fs-h3:    1.08rem;
  --fs-body:  1rem;
  --fs-lede:  1.1rem;
  --fs-small: .9rem;
  --fs-tiny:  .72rem;
  --fs-num:   clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  --lh-body:    1.65;
  --lh-heading: 1.12;
  --ls-caps:    .08em;

  /* ---------- СЕТКА И ОТСТУПЫ ---------- */
  --container:   1240px;
  --pad-inline:  clamp(1.25rem, 4.5vw, 3rem);
  --section-pad: clamp(3rem, 6vw, 5.5rem);
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --gap-card: 1px;

  /* ---------- ФОРМА ---------- */
  --radius:    2px;
  --radius-sm: 2px;
  --border-w:  1px;

  /* ---------- ТЕНИ ---------- */
  --shadow-1:   0 8px 24px -10px oklch(0% 0 0 / 60%);
  --shadow-pop: 0 4px 14px -6px oklch(0% 0 0 / 70%);

  /* ---------- MOTION ---------- */
  --ease:  cubic-bezier(.4,0,.2,1);
  --dur-1: 160ms;
  --dur-2: 240ms;
}