:root {
  /* Цветовые примитивы */
  --green-700: #45992f;
  --green-600: #4fae38;
  --green-50: #eaf7e4;

  --orange-700: #cc540a;
  --orange-600: #e8620c;
  --orange-50: #fdebdd;

  --red-600: #d23b2e;
  --red-50: #fbe9e7;

  --ink: #111111;
  --gray-800: #2b2b2b;
  --gray-600: #6b6b6b;
  --gray-400: #c7c7c7;
  --gray-300: #e6e6e6;
  --gray-100: #f5f5f4;
  --white: #ffffff;

  /* Семантические цвета */
  --color-bg: var(--white);
  --color-bg-subtle: var(--gray-100);
  --color-text: var(--ink);
  --color-text-muted: var(--gray-600);
  --color-border: var(--gray-300);

  --color-brand: var(--green-600);
  --color-brand-hover: var(--green-700);
  --color-brand-subtle: var(--green-50);

  --color-action: var(--orange-600);
  --color-action-hover: var(--orange-700);
  --color-action-subtle: var(--orange-50);

  --color-success: var(--green-600);
  --color-success-subtle: var(--green-50);
  --color-attention: var(--orange-600);
  --color-attention-subtle: var(--orange-50);
  --color-danger: var(--red-600);
  --color-danger-subtle: var(--red-50);

  /* На насыщенных акцентах чёрный проходит WCAG AA, белый — нет. */
  --color-on-brand: var(--ink);
  --color-on-action: var(--ink);
  --color-link: var(--orange-700);

  /* Типографика */
  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --text-display: 44px;
  --lh-display: 1.05;
  --text-h1: 34px;
  --lh-h1: 1.1;
  --text-h2: 26px;
  --lh-h2: 1.2;
  --text-h3: 20px;
  --lh-h3: 1.3;
  --text-body-lg: 18px;
  --lh-body-lg: 1.5;
  --text-body: 16px;
  --lh-body: 1.55;
  --text-sm: 14px;
  --lh-sm: 1.5;
  --text-caption: 13px;
  --lh-caption: 1.45;

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

  /* Отступы — базовый шаг 4 px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --radius-0: 0;
  --radius-sm: 2px;
  --radius-md: 4px;

  --border-hairline: 1px solid var(--color-border);
  --border-strong: 2px solid var(--ink);

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(17 17 17 / 6%);
  --shadow-md: 0 4px 12px rgb(17 17 17 / 8%);
}