/* МусорУм — дизайн-токены. ЕДИНСТВЕННЫЙ источник значений.
 *
 * Слои:
 *   1. Примитивы  — палитра, шкалы (не используются в разметке напрямую).
 *   2. Семантика  — роли: поверхность, текст, линия, бренд, состояния. Переопределяются в тёмной теме.
 *   3. Форма      — типографика, пространство, радиусы, тени, движение, слои (z-index).
 *
 * Старые имена (--primary, --bg-*, --mu-*, --gm-* …) сведены к этим токенам в compat.css,
 * поэтому смена значения здесь меняет весь сайт сразу. Подробности — docs/DESIGN.md и страница /design/.
 */
:root {
  color-scheme: light;

  /* ---------- 1. Примитивы ---------- */
  --ui-brand-50: #ecfdf3;
  --ui-brand-100: #dcfae6;
  --ui-brand-200: #a6f4c5;
  --ui-brand-300: #6ce9a6;
  --ui-brand-400: #32d583;
  --ui-brand-500: #12b76a;
  --ui-brand-600: #039855;
  --ui-brand-700: #027a48;
  --ui-brand-800: #05603a;
  --ui-brand-900: #054f31;
  --ui-brand-950: #0a1f16;
  --ui-lime: #d3f36b;
  --ui-violet: #7c3aed;
  --ui-violet-text: #6d28d9;                  /* фиолетовый текст на светлом */

  /* ---------- 2. Семантика (светлая тема) ---------- */
  /* бренд */
  --ui-primary: var(--ui-brand-500);          /* заливки, иконки, крупные элементы */
  --ui-primary-600: var(--ui-brand-600);      /* наведение */
  --ui-primary-700: var(--ui-brand-700);      /* нажатие и текст на светлом (контраст ≥ 4.5:1) */
  --ui-primary-300: var(--ui-brand-300);
  --ui-primary-soft: var(--ui-brand-100);     /* мягкая подложка */
  --ui-primary-rgb: 18, 183, 106;
  --ui-link: var(--ui-brand-700);             /* ссылки и акцентный текст */
  --ui-on-primary: #ffffff;
  --ui-ink: var(--ui-brand-950);              /* самый тёмный цвет бренда */
  --ui-ink-soft: #14532d;
  --ui-deep-1: #0b241a;                       /* тёмные блоки: hero, подвал */
  --ui-deep-2: #07130e;

  /* поверхности */
  --ui-surface: #ffffff;                      /* карточки, панели */
  --ui-surface-2: #f6f7f1;                    /* фон страницы */
  --ui-surface-3: #edf1ea;                    /* вложенные блоки, ховеры */
  --ui-surface-elevated: #ffffff;             /* меню, модальные окна */
  --ui-surface-rgb: 255, 255, 255;
  --ui-overlay: rgba(8, 20, 14, 0.5);

  /* линии */
  --ui-line: #e4e9e1;
  --ui-line-soft: #edf1ea;
  --ui-line-strong: #cdd6ca;

  /* текст */
  --ui-text: #101f18;
  --ui-text-2: #344741;
  --ui-text-3: #667b73;
  --ui-muted: #8a9c94;                        /* только плейсхолдеры и декор */

  /* состояния */
  --ui-success: var(--ui-brand-500);
  --ui-danger: #ef4444;
  --ui-danger-700: #b42318;                   /* текст ошибки на светлом */
  --ui-danger-soft: #fee4e2;
  --ui-warning: #f79009;
  --ui-warning-700: #b54708;
  --ui-warning-soft: #fef0c7;
  --ui-info: #0ea5e9;
  --ui-info-700: #026aa2;
  --ui-info-soft: #e0f2fe;

  /* ---------- 3. Форма ---------- */
  /* типографика */
  --ui-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont,
    'Segoe UI', system-ui, sans-serif;
  --ui-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ui-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ui-text-xs: 0.75rem;
  --ui-text-sm: 0.875rem;
  --ui-text-base: 1rem;
  --ui-text-lg: 1.125rem;
  --ui-text-xl: 1.25rem;
  --ui-h1: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  --ui-h2: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem);
  --ui-h3: clamp(1.15rem, 0.95rem + 0.8vw, 1.45rem);
  --ui-leading: 1.6;

  /* пространство (шаг 4 px) */
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 24px;
  --ui-space-6: 32px;
  --ui-space-7: 48px;
  --ui-space-8: 64px;

  /* радиусы */
  --ui-radius-xs: 8px;
  --ui-radius-sm: 12px;
  --ui-radius: 16px;
  --ui-radius-lg: 22px;
  --ui-radius-xl: 28px;
  --ui-radius-pill: 999px;

  /* тени */
  --ui-shadow-xs: 0 1px 2px rgba(16, 24, 20, 0.06);
  --ui-shadow-sm: 0 4px 14px -6px rgba(16, 24, 20, 0.14);
  --ui-shadow: 0 10px 30px -12px rgba(10, 31, 22, 0.22);
  --ui-shadow-md: 0 14px 38px -14px rgba(10, 31, 22, 0.26);
  --ui-shadow-lg: 0 24px 60px -24px rgba(10, 31, 22, 0.3);
  --ui-shadow-xl: 0 32px 72px -24px rgba(10, 31, 22, 0.38);
  --ui-shadow-glow: 0 8px 32px rgba(var(--ui-primary-rgb), 0.28);
  --ui-focus: 0 0 0 3px rgba(var(--ui-primary-rgb), 0.28);

  /* градиенты */
  --ui-gradient-brand: linear-gradient(135deg, var(--ui-brand-600) 0%, var(--ui-brand-700) 100%);
  --ui-gradient-lime: linear-gradient(135deg, #d3f36b 0%, #a3e635 100%);
  --ui-gradient-warm: linear-gradient(135deg, #f79009 0%, #d97706 100%);
  --ui-gradient-danger: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
  --ui-gradient-dark: linear-gradient(180deg, var(--ui-deep-1) 0%, var(--ui-deep-2) 100%);
  --ui-gradient-mesh:
    radial-gradient(560px 380px at 12% 8%, rgba(211, 243, 107, 0.22), transparent 60%),
    radial-gradient(620px 420px at 88% 12%, rgba(var(--ui-primary-rgb), 0.28), transparent 62%),
    radial-gradient(520px 520px at 50% 110%, rgba(14, 165, 233, 0.16), transparent 60%),
    linear-gradient(180deg, var(--ui-deep-1) 0%, var(--ui-deep-2) 100%);

  /* движение */
  --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ui-ease-io: cubic-bezier(0.4, 0, 0.2, 1);
  --ui-duration-fast: 160ms;
  --ui-duration: 240ms;
  --ui-duration-slow: 400ms;
  --ui-transition: var(--ui-duration-fast) var(--ui-ease);

  /* слои */
  --ui-z-sticky: 100;
  --ui-z-dropdown: 1000;
  --ui-z-modal: 1050;
  --ui-z-toast: 1100;
  --ui-z-call: 2000;

  /* раскладка */
  --ui-header-h: 64px;
  --ui-bottomnav-h: 64px;
  --ui-container: 1200px;
  --ui-tap: 44px;
}

/* ---------- Тёмная тема: мягкая, не чёрная ---------- */
[data-bs-theme='dark'] {
  color-scheme: dark;

  --ui-primary-soft: #123527;
  --ui-link: var(--ui-brand-300);
  --ui-primary-700: var(--ui-brand-400);      /* текст-акцент на тёмном */

  --ui-surface: #111d17;
  --ui-surface-2: #0c1611;
  --ui-surface-3: #16241d;
  --ui-surface-elevated: #172720;
  --ui-surface-rgb: 17, 29, 23;
  --ui-overlay: rgba(2, 8, 5, 0.66);

  --ui-line: #1e2e27;
  --ui-line-soft: #1a2822;
  --ui-line-strong: #2b4036;

  --ui-text: #eef7f0;
  --ui-text-2: #c3d4cb;
  --ui-text-3: #94a8a0;
  --ui-muted: #6f857c;

  --ui-danger: #f87171;
  --ui-danger-700: #fda29b;
  --ui-danger-soft: rgba(248, 113, 113, 0.16);
  --ui-warning: #fbbf24;
  --ui-warning-700: #fedf89;
  --ui-warning-soft: rgba(251, 191, 36, 0.14);
  --ui-info: #38bdf8;
  --ui-info-700: #7cd4fd;
  --ui-violet-text: #c4b5fd;
  --ui-info-soft: rgba(56, 189, 248, 0.14);

  --ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ui-shadow-sm: 0 4px 14px -6px rgba(0, 0, 0, 0.5);
  --ui-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.55);
  --ui-shadow-md: 0 16px 42px -14px rgba(0, 0, 0, 0.6);
  --ui-shadow-lg: 0 28px 70px -28px rgba(0, 0, 0, 0.65);
  --ui-shadow-xl: 0 36px 80px -28px rgba(0, 0, 0, 0.75);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-duration-fast: 0ms;
    --ui-duration: 0ms;
    --ui-duration-slow: 0ms;
  }
}