/* Дизайн-токены gen-plans.ru — единственный источник значений.
   Правила: docs/DESIGN_SYSTEM.md. В компонентах и страницах — только var(--…),
   никаких «сырых» цветов, размеров шрифта, радиусов и теней. */

:root {
  /* ---------- Примитивы: палитра (не использовать в компонентах напрямую) ---------- */
  --c-white: #FFFFFF;
  --c-ink-900: #111111;
  --c-ink-700: #3A3A3A;
  --c-ink-500: #6B6B6B;   /* 5.3:1 на белом — минимальный для текста */
  --c-ink-300: #B5B5B5;
  --c-ink-200: #D9D9D9;
  --c-ink-100: #ECECEA;
  --c-ink-50:  #F6F6F5;
  --c-orange-500: #FF5A1F;
  --c-orange-600: #E04A0F;
  --c-orange-700: #C2410C;  /* текст оранжевым — только этим тоном (5.2:1) */
  --c-orange-100: #FFE2D1;
  --c-orange-50:  #FFF4EC;
  --c-green-700: #1F7A3F;
  --c-green-50:  #E9F6EE;
  --c-red-700: #B42318;
  --c-red-50:  #FDECEA;
  --c-blue-700: #24558C;
  --c-blue-50:  #EAF1FA;

  /* ---------- Семантика: цвет ---------- */
  --bg: var(--c-white);
  --surface: var(--c-white);
  --surface-muted: var(--c-ink-50);        /* слой «сводка / справка» */
  --surface-context: var(--c-orange-50);   /* слой «контекст / сценарий / объект» */
  --text: var(--c-ink-900);
  --text-secondary: var(--c-ink-700);
  --text-muted: var(--c-ink-500);
  --text-disabled: var(--c-ink-300);
  --text-on-accent: var(--c-white);
  --link: var(--c-orange-600);             /* ссылки — оранжевые, в одной семье с кнопкой */
  --link-hover: var(--c-orange-700);
  --surface-promo: #17171A;                /* тёмная поверхность промо-блоков */
  --border: var(--c-ink-100);
  --border-strong: var(--c-ink-900);
  --border-context: var(--c-orange-100);
  --accent: var(--c-orange-500);           /* только главное действие на экране */
  --accent-hover: var(--c-orange-600);

  /* Статусы: тон фона + тон значка/текста. Смысл несёт иконка, статус — тон. */
  --status-ok: var(--c-green-700);      --status-ok-bg: var(--c-green-50);
  --status-warn: var(--c-orange-700);   --status-warn-bg: var(--c-orange-50);
  --status-stop: var(--c-red-700);      --status-stop-bg: var(--c-red-50);
  --status-info: var(--c-blue-700);     --status-info-bg: var(--c-blue-50);
  --status-unknown: var(--c-ink-500);   --status-unknown-bg: var(--c-ink-50);

  /* ---------- Типографика ---------- */
  --font-sans: "Inter Tight", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-plate: "Barlow Condensed", "Arial Narrow", sans-serif;

  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: clamp(28px, 3.6vw, 40px);
  --fs-display: clamp(34px, 5.2vw, 62px);

  --lh-tight: 1.04;
  --lh-snug: 1.25;
  --lh-base: 1.55;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-tight: -0.035em;
  --tracking-snug: -0.015em;
  --tracking-caps: 0.14em;

  /* ---------- Отступы: сетка 4 px ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- Радиусы: концентрические. Внешний = внутренний + inset ---------- */
  --inset: 6px;
  --r-xs: 6px;    /* табличка, мелкие метки */
  --r-sm: 10px;   /* чипы, ячейки внутри контролов */
  --r-md: 14px;   /* кнопки, поля */
  --r-lg: 22px;   /* ядро (белая карточка) */
  --r-xl: 28px;   /* оболочка = r-lg + inset */
  --r-pill: 999px;

  /* ---------- Размеры контролов ---------- */
  --control-sm: 36px;
  --control-md: 44px;   /* минимальная зона нажатия */
  --control-lg: 56px;
  --icon-sm: 16px;
  --icon-md: 20px;

  /* ---------- Тени ---------- */
  --shadow-1: 0 1px 2px rgba(17, 17, 17, .04);
  --shadow-2: 0 1px 2px rgba(17, 17, 17, .04), 0 12px 32px rgba(17, 17, 17, .06);
  --shadow-context: 0 1px 2px rgba(17, 17, 17, .03), 0 18px 44px rgba(224, 74, 15, .08);
  --shadow-float: 0 8px 22px rgba(17, 17, 17, .14);
  --focus-ring: 0 0 0 3px rgba(255, 90, 31, .35);

  /* ---------- Раскладка ---------- */
  --container: 1180px;
  --container-narrow: 760px;
  --gutter: 24px;

  /* ---------- Движение ---------- */
  --dur: .15s;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }
}