/* DustDOG — токены дизайн-системы (DESIGN.md 1.1–1.3) */
:root {
  /* фон и поверхности */
  --bg:            #F4F2ED;
  --bg-paper:      #FFFFFF;
  --bg-ink:        #0F0F0F;
  --bg-ink-2:      #1A1A1A;

  /* текст */
  --ink:           #0F0F0F;
  --ink-2:         #4A4A48;
  /* DESIGN.md: #8A8884. Для текстовых подписей затемнено до 4.9:1 на --bg (требование контраста ≥ 4.5:1).
     Исходный тон остаётся в --ink-3-deco для линий и декора. */
  --ink-3:         #6B6964;
  --ink-3-deco:    #8A8884;
  --ink-on-dark:   #F4F2ED;
  --ink-on-dark-2: #A9A7A1;

  /* акцент */
  --accent:        #FF4A1C;
  --accent-hover:  #E63D12;
  --accent-soft:   #FFE6DD;
  --accent-glow:   rgba(255,74,28,.35);
  /* оранжевый для мелкого текста на светлом и фона кнопки с белым текстом (контраст ≥ 4.5:1) */
  --accent-ink:    #B8300C;
  --accent-cta:    #D63A12;
  --accent-cta-hover: #BF3310;

  /* состояния: точки — исходные цвета; текст бейджей — затемнённые «-ink» */
  --ok:            #2F9E5B;
  --ok-soft:       #DFF3E6;
  --ok-ink:        #1F7A43;
  --err:           #C4433A;
  --err-soft:      #F7E0DD;
  --err-ink:       #A5352D;
  --warn:          #D9901A;
  --warn-soft:     #FBEFD6;
  --warn-ink:      #8A5A0B;
  --muted:         #8A8884;
  --muted-soft:    #ECEAE4;
  --muted-ink:     #5E5C58;

  /* линии и стекло */
  --line:          #DCD9D1;
  --line-dark:     #2C2C2C;
  --glass:         rgba(255,255,255,.55);
  --glass-border:  rgba(255,255,255,.85);
  --glass-shadow:  0 24px 60px rgba(15,15,15,.12), inset 0 1px 0 rgba(255,255,255,.9);
  --glass-accent:  rgba(255,74,28,.78);

  /* шрифты */
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-text:    'Golos Text', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* шкала */
  --t-h1:    clamp(44px, 8vw, 112px);
  --t-h2:    clamp(34px, 5.2vw, 72px);
  --t-h3:    clamp(22px, 2vw, 28px);
  --t-lead:  clamp(17px, 1.4vw, 22px);
  --t-body:  17px;
  --t-small: 14px;
  --t-label: 12px;

  /* отступы */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;

  /* радиусы */
  --r-s: 6px;
  --r-m: 12px;
  --r-l: 20px;

  --container: 1280px;
  --gutter: 24px;
  --header-h: 72px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

@media (max-width: 767px) {
  :root {
    --t-body: 16px;
    --gutter: 16px;
    --header-h: 60px;
  }
}