/* Токены из Figma: файл cursovaya.ru, коллекции Primitives / Color / Spacing.
   Менять здесь, а не по месту. Имена совпадают с CSS-именами переменных в Dev Mode. */

:root {
  /* Текст */
  --color-text-primary: #10233c;
  --color-text-secondary: #2a4361;
  --color-text-muted: #5e7794;
  --color-text-accent: #1e43c4;
  --color-text-on-action: #ffffff;
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.55);
  --color-text-on-dark-faint: rgba(255, 255, 255, 0.38);
  --color-text-danger: #d92d20;

  /* Фон */
  --color-bg-page: #ffffff;
  --color-bg-sheet: #f4f7fb;
  --color-bg-card: #ffffff;
  --color-bg-field: #ffffff;
  --color-bg-dark: #10233c;
  --color-bg-action: #2a54e0;
  --color-bg-action-hover: #1e43c4;
  --color-bg-action-pressed: #16265f;
  --color-bg-action-disabled: rgba(42, 84, 224, 0.4);
  --color-bg-accent-soft: rgba(42, 84, 224, 0.12);
  --color-bg-danger-soft: rgba(217, 45, 32, 0.12);

  /* Границы */
  --color-border-default: rgba(16, 35, 60, 0.14);
  --color-border-soft: rgba(16, 35, 60, 0.08);
  --color-border-accent: #2a54e0;
  --color-border-danger: #d92d20;
  --color-border-on-dark: rgba(255, 255, 255, 0.14);

  /* Пастель сторис и плиток */
  --color-story-1: #dce6ff;
  --color-story-2: #e7defb;
  --color-story-3: #d3edea;
  --color-story-4: #ffe0d8;
  --color-story-5: #ffedc9;

  /* Скругления */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Шаг сетки */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 56px;
  --spacing-4xl: 72px;
  --spacing-5xl: 96px;
  --spacing-6xl: 120px;

  /* Шрифт. В макете Inter — он честный двойник системного,
     на живом сайте грузить нечего: кириллица есть у всех системных. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  /* Раскладка */
  --page-gutter: 20px;
  --page-max: 1200px;
  --header-h: 60px;
}

@media (min-width: 1024px) {
  :root {
    --page-gutter: 120px;
    --header-h: 72px;
  }
}