/* ============================================================
   Design tokens — единая точка темизации.
   Чтобы сменить брендинг достаточно изменить значения ниже —
   все rgba(), тени, градиенты подтянутся автоматически.
   ============================================================ */
:root {
  /* ---------- Brand: акцент ---------- */
  --color-accent:     #FE7437;   /* CTA, кнопки */
  --color-accent-600: #E85F22;   /* hover */
  --color-accent-50:  #FFF1E8;   /* фон-плашки */
  --color-accent-100: #FFC79A;   /* очень светлый (градиент) */
  --color-accent-200: #FFB48A;   /* светлый (иконки на тёмном) */
  --color-accent-300: #FF9A6A;   /* средний (градиент) */
  --color-accent-rgb: 254, 116, 55; /* для rgba() */

  /* ---------- Brand: основной ---------- */
  --color-primary:     #3858D6;  /* ссылки, активные состояния */
  --color-primary-600: #2A45B0;  /* hover */
  --color-primary-50:  #EDF1FF;  /* фон-плашки */
  --color-primary-700: #14213D;  /* тёмный (градиент) */
  --color-primary-800: #1A2554;  /* тёмнее (градиент) */
  --color-primary-900: #0F1730;  /* очень тёмный (fallback) */
  --color-primary-rgb: 56, 88, 214; /* для rgba() */

  /* ---------- Нейтральные ---------- */
  --color-text:         #14161B;
  --color-text-muted:   #5A6271;
  --color-text-soft:    #8A93A4;
  --color-border:       #E4E7EE;
  --color-bg:           #FFFFFF;
  --color-bg-soft:      #F6F7FB;
  --color-bg-dark:      #14161B;
  --color-bg-dark-soft: #1F2330;
  --color-on-dark:      #FFFFFF;
  --color-on-dark-muted: #B6BCCB;
  --color-text-rgb:   20, 22, 27;   /* для rgba() */
  --color-border-rgb: 228, 231, 238; /* для rgba() */

  /* ---------- Семантические ---------- */
  --color-success:     #1FB36A;
  --color-success-rgb: 31, 179, 106; /* для rgba() */
  --color-warning:     #F1A33B;
  --color-warning-rgb: 241, 163, 59; /* для rgba() */
  --color-danger:      #E5484D;

  /* ---------- Типографика ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

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

  /* ---------- Отступы (4-pt scale) ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---------- Разметка ---------- */
  --container-max: 1200px;
  --container-pad: var(--space-4);
  --header-h:    64px;
  --header-h-md: 76px;

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

  /* ---------- Тени (автоматически берут цвет из RGB-переменных) ---------- */
  --shadow-sm:    0 1px 2px rgba(var(--color-text-rgb), 0.06), 0 1px 1px rgba(var(--color-text-rgb), 0.04);
  --shadow-md:    0 4px 12px rgba(var(--color-text-rgb), 0.08);
  --shadow-lg:    0 12px 32px rgba(var(--color-text-rgb), 0.12);
  --shadow-focus: 0 0 0 3px rgba(var(--color-primary-rgb), 0.25);

  /* ---------- Анимация ---------- */
  --t-fast: 120ms ease;
  --t-base: 200ms ease;
  --t-slow: 320ms cubic-bezier(.2,.7,.2,1);

  /* ---------- Z-index ---------- */
  --z-header:  50;
  --z-overlay: 80;
  --z-modal:   100;
}

/* Breakpoints (для удобства упоминаются в комментариях, в CSS используются прямые медиа-запросы):
   - sm: 480px
   - md: 768px
   - lg: 1024px
   - xl: 1280px
*/