/* СОЛД – делись — design tokens (from Figma 2008:799 + Typography 2024:29244) */

:root {
  /* === Brand / Primary === */
  --color-brand: #764FE9;          /* Violet/violet */
  --color-brand-hover: #5632BF;    /* Violet/hover */

  /* === Neutrals (Gray scale) === */
  --color-black: #282828;          /* Gray/black */
  --color-black-hover: #3F3F46;    /* Gray/hover */
  --color-gray-700: #707070;       /* Gray/Gray */
  --color-gray-500: #999999;       /* Gray/Hover */
  --color-gray-400: #CCCCCC;       /* Gray/Icons */
  --color-gray-300: #DBDBDB;       /* Gray/border */
  --color-gray-200: #F7F7F7;       /* Gray/Tag */
  --color-gray-100: #FAFAFA;       /* Gray/общий — page bg */
  --color-white:   #FFFFFF;        /* Gray/white */

  /* === Status === */
  --color-warning-hover: #EB9D00;
  --color-warning:       #FFAC05;
  --color-warning-bg:    rgba(255, 179, 25, 0.14);

  --color-success-hover: #2A7E51;
  --color-success:       #37A46A;
  --color-success-bg:    rgba(55, 164, 106, 0.14);

  --color-danger-hover:  #CF0105;
  --color-danger:        #E35255;
  --color-danger-bg:     rgba(227, 82, 85, 0.14);

  /* === Typography ===
     Шрифт уточним при сборке компонентов (sans-serif system fallback пока) */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* H — заголовочные, weight 600/700 */
  --h24-size: 24px;   --h24-lh: 28px;
  --h20-size: 20px;   --h20-lh: 24px;
  --h18-size: 18px;   --h18-lh: 24px;
  --h16-size: 16px;   --h16-lh: 20px;
  --h14-size: 14px;   --h14-lh: 16px;
  --h12-size: 12px;   --h12-lh: 14px;
  --h10-size: 10px;   --h10-lh: 11px;

  /* Body — текстовые, weight 400/500 */
  --body20-size: 20px; --body20-lh: 24px;
  --body18-size: 18px; --body18-lh: 25px;
  --body16-size: 16px; --body16-lh: 19px;
  --body14-size: 14px; --body14-lh: 18px;
  --body12-size: 12px; --body12-lh: 14px;
  --body10-size: 10px; --body10-lh: 12px;

  /* === Spacing (8pt grid) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* === Radius === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 100px;

  /* === Container === */
  --container-max: 1440px;
  --container-pad: 80px;

  /* === Shadow === */
  --shadow-sm: 0 2px 8px rgba(40, 40, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(40, 40, 40, 0.08);
  --shadow-lg: 0 16px 48px rgba(86, 50, 191, 0.16);
}