/*
 * Токены дизайн-системы «Штиль» — docs/design/design-system.md, §1 и §3.9.
 * Имя CSS-переменной = имя токена. Общий файл для лендинга и панели
 * (tech-vision, «Вёрстка лендинга и панели», правило 7). Значение меняется здесь
 * и в переменных docs/design/pencil/s22-directions.pen одновременно.
 */
:root {
  /* 1.1 Примитивы — в интерфейсе напрямую не используются */
  --indigo-50: #F6F7FC;
  --indigo-100: #ECEEF7;
  --indigo-200: #D9DCF0;
  --indigo-300: #B5BAE0;
  --indigo-400: #8790CA;
  --indigo-500: #6570B6;
  --indigo-600: #4A55A2;
  --indigo-700: #3E4890;
  --indigo-800: #333B76;
  --indigo-900: #262C58;

  --neutral-0: #FFFFFF;
  --neutral-50: #F6F6F3;
  --neutral-100: #F1F1EE;
  --neutral-200: #E6E5E0;
  --neutral-500: #8A8C93;
  --neutral-600: #5D616C;
  --neutral-900: #1E2028;

  /* 1.2 Поверхности, текст, действие */
  --color-page: var(--neutral-50);
  --color-surface: var(--neutral-0);
  --color-surface-subtle: var(--neutral-100);
  --color-border: var(--neutral-200);
  --color-text: var(--neutral-900);
  --color-text-secondary: var(--neutral-600);
  --color-text-disabled: var(--neutral-500);
  --color-fill-disabled: var(--neutral-200);
  --color-row-hover: var(--indigo-50);
  --color-action: var(--indigo-600);
  --color-action-hover: var(--indigo-700);
  --color-action-pressed: var(--indigo-800);
  --color-action-soft: var(--indigo-100);
  --color-action-outline: var(--indigo-200);
  --color-on-action: var(--neutral-0);
  --color-link: var(--indigo-700);
  --color-focus: var(--indigo-400);

  /* 1.3 Статусы поставщика */
  --status-action-bg: var(--indigo-100);
  --status-action-fg: var(--indigo-700);
  --status-action-icon: var(--indigo-600);
  --status-progress-bg: #EFEFEB;
  --status-progress-fg: #45484F;
  --status-progress-icon: #6B6E76;
  --status-reply-bg: #E6EEF6;
  --status-reply-fg: #24507A;
  --status-reply-icon: #2F6596;
  --status-closed-bg: var(--neutral-100);
  --status-closed-fg: #62656E;
  --status-closed-icon: var(--neutral-500);
  --status-problem-bg: #FBECDD;
  --status-problem-fg: #8A4710;
  --status-problem-icon: #B05A12;

  /* 1.4 Системные */
  --color-warning-bg: #FDF3E3;
  --color-warning-border: #F2D9AE;
  --color-warning-text: #6B4206;
  --color-warning-icon: #A86410;
  --color-error: #B3261E;
  --color-error-bg: #FCEDEC;
  --color-error-border: #F2C4C0;
  --color-error-text: #8C1D18;
  --color-success: #2E7D4F;
  --color-success-bg: #E8F3EC;
  --color-success-border: #BFDCC9;
  --color-success-text: #1F5F3A;
  --color-toast-bg: var(--neutral-900);
  --color-toast-text: var(--neutral-0);
  --color-toast-muted: #A9ABB3;
  --color-toast-action: var(--indigo-300);
  --color-toast-success: #7BC59A;

  /* 1.5 Шрифт */
  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --line-height-tight: 1.2;
  --line-height-normal: 1.35;

  --type-display: 36px;
  --type-display-mobile: 26px;
  --type-title: 22px;
  --type-title-mobile: 19px;
  --type-number: 28px;
  --type-number-mobile: 22px;
  --type-brand: 18px;
  --type-heading: 16px;
  --type-body: 15px;
  --type-small: 14px;
  --type-caption: 13px;
  --type-tag: 12px;

  /* 1.6 Отступы */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* 1.7 Радиусы, линии, тени */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 999px;
  --border-width: 1px;
  --border-width-strong: 1.5px;
  --focus-width: 2px;
  --shadow-color: #1E20280F;
  --shadow-color-raised: #1E20281F;
  --shadow-card: 0 4px 16px var(--shadow-color);
  --shadow-sticky: 0 -4px 16px var(--shadow-color);
  --shadow-raised: 0 8px 24px var(--shadow-color-raised);

  /* 1.8 Размеры */
  --size-control: 44px;
  --size-control-lg: 52px;
  --size-icon-button: 40px;
  --container-width: 1120px;
  --gutter-mobile: 16px;

  /* 3.9 Лендинг — только на лендинге, в панели и админке не используются */
  --landing-ink: #14172E;
  --landing-ink-raised: #1D2142;
  --landing-ink-line: #2E3360;
  --landing-on-ink: var(--neutral-0);
  --landing-on-ink-secondary: #AEB3D6;
  --landing-action-on-ink: var(--indigo-500);
  --landing-glow: #4A55A280;
  --landing-sand: #F5E9DA;
  --landing-sand-soft: #FBF4EA;
  --landing-sand-strong: #F2CFA5;
  --landing-shadow-hero: 0 24px 64px #0B0D1F40;
  --landing-display: 72px;
  --landing-display-mobile: 40px;
  --landing-title: 44px;
  --landing-lead: 20px;
  --landing-radius-xl: 24px;
  --landing-radius-2xl: 32px;
  --landing-section: 120px;
}