/* ============================================================
   Дизайн-токены. Тёмная графитово-горчичная тема.
   Палитра выведена из референса D:\protokol\referens\grafit.jpg:
   тёплый графит панелей, глубокий уголь, бронза, тёплый греж, горчица.
   ============================================================ */
:root {
  /* Фон и поверхности — тёплый графит */
  --color-bg-main: #161513;
  --color-bg-secondary: #1c1b18;
  --color-bg-card: #232220;
  --color-bg-card-hover: #2b2926;
  --color-border: #37342f;
  --color-border-soft: #2a2825;

  /* Текст — тёплый кремовый / греж */
  --color-text-primary: #f2f0e9;
  --color-text-secondary: #aaa79f;
  --color-text-muted: #77746d;

  /* Акцент — горчичный (дозированно) */
  --color-accent: #c5a442;
  --color-accent-hover: #d2b451;
  --color-accent-soft: rgba(197, 164, 66, 0.14);
  --color-accent-border: rgba(197, 164, 66, 0.42);

  /* Второстепенный тёплый бронзовый оттенок — очень редко, для тонких линий */
  --color-bronze: #6f5227;

  /* Радиусы */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Отступы (шаг 4) */
  --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;

  /* Тени — очень умеренные */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 20px 60px rgba(0, 0, 0, 0.55);

  /* Типографика */
  --font-sans: Inter, Manrope, "Segoe UI", Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 28px;
  --fs-2xl: 36px;
  --lh-base: 1.6;
  --lh-tight: 1.25;

  /* Анимации — быстрые и спокойные */
  --ease: ease;
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 260ms;
  /* Единый переход для интерактивных элементов */
  --transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;

  /* Крупное скругление карточек-аккордеонов */
  --radius-card: 20px;

  /* Ширина контента — широкая, чтобы использовать пространство экрана */
  --content-width: 1600px;
  /* Ширина области названия задачи в свёрнутом аккордеоне */
  --title-col: minmax(240px, 460px);

  color-scheme: dark;
}