/**
 * Virstak UI — канонические design tokens (единый слой).
 * Публикуется на https://ui.virstak.ru/virstak-tokens.css
 *
 * Цвета: --color-*
 * Радиусы / отступы: --radius-1..3, --space-1..3 (шкала 20 / 15 / 10)
 * Контролы: --control-*
 * Статусы: --color-danger|warning|success|info
 * Доп. оттенки в компонентах — через color-mix(...), без overlay-токенов.
 */

html[data-theme='light'],
html:not([data-theme]) {
  color-scheme: light;

  --color-accent: #15bbaa;
  --color-accent-bg: #1c1c1e;
  --color-bg: #e8e8e8;
  --color-surface: #f0f0f0;
  --color-border: #00000012;
  --color-active: #00000012;
  --color-hover: #0000000a;
  --color-text: #111111;
  --color-text-secondary: #111111c4;
  --color-text-on-accent: #f9f9f9;
  --color-text-on-accent-secondary: #f9f9f97d;

  --color-success: #22c55e;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-info: #0284c7;

  --radius-1: 20px;
  --radius-2: 15px;
  --radius-3: 10px;

  --space-1: 20px;
  --space-2: 15px;
  --space-3: 10px;

  --control-h-sm: 28px;
  --control-h-md: 34px;
  --control-h-lg: 42px;
  --control-px-sm: 10px;
  --control-px-md: 12px;
  --control-px-lg: 14px;
  --control-font-sm: 12px;
  --control-font-md: 13px;
  --control-font-lg: 15px;
  --control-gap: var(--space-3);
  --control-disabled-opacity: 0.48;

  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--color-accent) 42%, transparent);
  --shadow-sm: 0 2px 12px color-mix(in srgb, var(--color-text) 10%, transparent);
  --shadow-md: 0 8px 32px color-mix(in srgb, var(--color-text) 12%, transparent);
}

html[data-theme='dark'] {
  color-scheme: dark;

  --color-accent: #15bbaa;
  --color-accent-bg: #1c1c1e;
  --color-bg: #121214;
  --color-surface: #1e1e22;
  --color-border: #ffffff14;
  --color-active: #ffffff14;
  --color-hover: #ffffff0d;
  --color-text: #f9f9f9;
  --color-text-secondary: #f9f9f97d;
  --color-text-on-accent: #f9f9f9;
  --color-text-on-accent-secondary: #f9f9f97d;

  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-danger: #f87171;
  --color-info: #38bdf8;

  --radius-1: 20px;
  --radius-2: 15px;
  --radius-3: 10px;

  --space-1: 20px;
  --space-2: 15px;
  --space-3: 10px;

  --control-h-sm: 28px;
  --control-h-md: 34px;
  --control-h-lg: 42px;
  --control-px-sm: 10px;
  --control-px-md: 12px;
  --control-px-lg: 14px;
  --control-font-sm: 12px;
  --control-font-md: 13px;
  --control-font-lg: 15px;
  --control-gap: var(--space-3);
  --control-disabled-opacity: 0.48;

  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--color-accent) 48%, transparent);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.55);
}