/* Дизайн-токены HandMade CRM.
   Источник истины: docs/design-system/index.html.
   Значения меняются только после изменения дизайн-системы. */

:root {
  --color-bg: #F6F6F5;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  /* Модалки (teleport в body) — крем v9, не чистый белый */
  --color-modal-surface: #FAF8F4;
  --color-border: #E5E7EB;
  --color-border-strong: #D1D5DB;
  --color-text: #1F2328;
  --color-text-secondary: #6B7280;
  --color-text-muted: #9CA3AF;

  --color-accent: #5A7D68;
  --color-accent-hover: #4C6D5A;
  --color-accent-active: #3E5C4B;

  --color-success: #5A7D68;
  --color-success-bg: #E8F7EF;
  --color-success-text: #14522E;
  --color-warning: #8B6C36;
  --color-warning-bg: #FAF2E3;
  --color-warning-text: #5D471F;
  --color-danger: #E5484D;
  --color-danger-bg: #FDECEC;
  --color-danger-text: #9E1C20;
  --color-info: #3B82F6;
  --color-info-bg: #E8F2FF;
  --color-info-text: #1E4DB3;
  --color-neutral: #6B7280;
  --color-neutral-bg: #F3F4F6;
  --color-neutral-text: #374151;
  --color-complete: #2F6F6A;
  --color-complete-bg: #E6F3F1;
  --color-complete-text: #1A4A46;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  --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(31, 35, 40, 0.05);
  --shadow-md: 0 4px 12px rgba(31, 35, 40, 0.08);
  --shadow-lg: 0 12px 24px rgba(31, 35, 40, 0.12);

  --font-sans: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-display: 'Unbounded', 'Rubik', system-ui, sans-serif;

  --focus-ring: 0 0 0 3px rgba(46, 158, 91, 0.25);
}

/* Тёмная тема — вариант E: затемнённая светлая v9 (sage + крем).
   Источник: превью catalog/detail/dark/dim/ (октябрь 2026). */
[data-theme="dark"] {
  color-scheme: dark;

  /* Light v9: #5A7D68 рамка → тёмный sage */
  --color-bg: #3A5248;
  /* Light v9: #FAF8F4 лист → тёмный крем */
  --color-surface: #3A3632;
  --color-surface-raised: #48443E;
  --color-modal-surface: #48443E;
  /* Шапка topbar — светлее листа */
  --color-topbar: #48443E;
  /* Light v9: #E0D8CC бордер */
  --color-border: #5C574F;
  --color-border-strong: #6A645C;
  --color-text: #F0EBE3;
  --color-text-secondary: #B0BDB4;
  --color-text-muted: #8A968D;

  --color-accent: #6B9078;
  --color-accent-hover: #7A9B88;
  --color-accent-active: #5A7D68;

  /* Light v9: #E8F0EA / #4A6B55 */
  --color-success-bg: #4A524C;
  --color-success-text: #C5D4CA;
  --color-warning-bg: #5A5244;
  --color-warning-text: #E8D4B0;
  --color-danger-bg: #6A4548;
  --color-danger-text: #F0B4B6;
  --color-info-bg: #4A5C72;
  --color-info-text: #A8C4F0;
  --color-neutral-bg: #45423C;
  --color-complete-bg: #3F5552;
  --color-complete-text: #B8DED8;

  --shadow-sm: 0 1px 3px rgba(26, 36, 30, 0.18);
  --shadow-md: 0 4px 14px rgba(26, 36, 30, 0.22);
  --shadow-lg: 0 12px 28px rgba(26, 36, 30, 0.28);

  --focus-ring: 0 0 0 3px rgba(107, 144, 120, 0.38);
}