/* DESIGN-SYSTEM TIER 2 — SEMANTIC TOKENS
   Слой между brand и компонентами.
   Компоненты используют ТОЛЬКО эти переменные.
   Запрещено переопределять на сайтах. */

:root {
  /* Surfaces */
  --color-bg-page:         var(--brand-paper);
  --color-bg-surface:      var(--brand-paper-soft);
  --color-bg-elevated:     var(--brand-paper);
  --color-bg-inverted:     var(--brand-ink);

  /* Text */
  --color-text-primary:    var(--brand-ink);
  --color-text-secondary:  rgba(26, 26, 24, 0.6);
  --color-text-muted:      rgba(26, 26, 24, 0.4);
  --color-text-inverted:   var(--brand-paper);
  --color-text-accent:     var(--brand-accent);

  /* Borders */
  --color-border-subtle:   var(--brand-line);
  --color-border-strong:   var(--brand-ink);

  /* Action (CTA) */
  --color-action-primary:       var(--brand-accent);
  --color-action-primary-hover: var(--brand-accent-hover);
  --color-action-ghost:         transparent;

  /* Typography semantic */
  --text-h1-size:     clamp(36px, 5vw, 56px);
  --text-h1-weight:   var(--fw-semibold);
  --text-h1-line:     var(--lh-tight);
  --text-h1-tracking: var(--ls-tight);

  --text-h2-size:     clamp(24px, 3vw, 36px);
  --text-h2-weight:   var(--fw-semibold);
  --text-h2-line:     var(--lh-snug);

  --text-h3-size:     var(--fs-6);
  --text-h3-weight:   var(--fw-semibold);

  --text-body-size:   var(--fs-4);
  --text-body-line:   var(--lh-normal);
  --text-body-weight: var(--fw-regular);

  --text-eyebrow-size:    var(--fs-2);
  --text-eyebrow-tracking: var(--ls-wide);
  --text-eyebrow-family:  var(--font-mono);
}