/* ═══════════════════════════════════════════════
   Дизайн-токены панели. Единственное место, где живут «сырые» значения
   (цвета, размеры, радиусы). Компоненты (app.css) берут их через var(--…).
   Правила: doc/design-system.md. Подключается ДО app.css.
   ═══════════════════════════════════════════════ */

:root {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-sans: var(--font);
  --font-mono: var(--mono);
  --sidebar-w: 248px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --ease: .15s ease;

  --gray-0: #FFFFFF;
  --gray-50: #F4F7FB;
  --gray-100: #EBF0F7;
  --gray-200: #D9E1EC;
  --gray-300: #B8C4D6;
  --gray-400: #8B9BB0;
  --gray-500: #6B7C93;
  --gray-600: #516278;
  --gray-700: #3A4A5F;
  --gray-800: #243246;
  --gray-900: #121A26;

  --accent: #4F8CFF;
  --accent-hover: #3B78F0;
  --accent-light: #EAF1FF;
  --accent-cyan: #0EA5E9;
  --accent-glow: rgba(79, 140, 255, 0.18);
  --on-accent: #FFFFFF;

  --success: #22C55E;
  --success-light: #ECFDF5;
  --danger: #EF4444;
  --danger-hover: #DC2626;
  --danger-light: #FEF2F2;
  --warning: #F59E0B;
  --warning-light: #FFFBEB;

  --shadow-xs: 0 1px 2px rgba(18, 26, 38, 0.04);
  --shadow-sm: 0 2px 8px rgba(18, 26, 38, 0.06);
  --shadow-md: 0 6px 18px rgba(18, 26, 38, 0.08);
  --shadow-lg: 0 12px 36px rgba(18, 26, 38, 0.12);
  --shadow-xl: 0 20px 52px rgba(18, 26, 38, 0.14);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --r: var(--radius-md);
  --r-lg: var(--radius-lg);
  --r-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-md: 17px;
  --font-size-lg: 20px;

  /* bridge to existing component vars */
  --bg: var(--gray-50);
  --bg2: var(--gray-50);
  --surface: var(--gray-0);
  --surface2: var(--gray-100);
  --surface3: var(--gray-100);
  --text: var(--gray-900);
  --text2: var(--gray-600);
  --muted: var(--gray-400);
  --border: var(--gray-200);
  --border2: var(--gray-300);
  --ring: var(--accent);
  --brand: var(--accent);
  --brand-hover: var(--accent-hover);
  --brand-muted: var(--accent-light);
  --brand-glow: var(--accent-glow);
  --ok: var(--success);
  --ok-muted: var(--success-light);
  --ok-border: #bbf7d0;
  --fail: var(--danger);
  --fail-muted: var(--danger-light);
  --fail-border: #fecaca;
  --warn: var(--warning);
  --warn-muted: var(--warning-light);
  --market: #7C3AED;
  --market-hover: #6D28D9;
  --batch: #EA580C;
  --batch-hover: #C2410C;
  --sell: #DC2626;
  --sell-hover: #B91C1C;
  --buy: #16A34A;
  --buy-hover: #15803D;
  --over-go: #B45309;
  --over-go-hover: #92400E;
  --stop: #0284C7;
  --stop-hover: #0369A1;
  --stop-all: #0E7490;
  --stop-all-hover: #155E75;
  --canvas-glow: none;
  --sidebar-bg: var(--gray-0);
  --terminal-bg: #F1F5F9;
  --terminal-fg: #334155;
  --overlay: rgba(18, 26, 38, 0.4);
  --theme-meta: #F4F7FB;
  --pop-black: var(--border);
  --pop-yellow: var(--warning);
  --pop-blue: var(--accent);
  --pop-red: var(--danger);
  --pop-shadow: var(--shadow-sm);
  --pop-shadow-sm: var(--shadow-xs);
  /* ── Новое: шкалы (см. doc/design-system.md). Миграция старых значений — по модулям. ── */
  /* Типографика: 8 ступеней вместо 17 */
  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  /* Радиусы: 6 / 8 / 12 / 18 / pill (+ --radius-sm/md/lg/xl выше) */
  --radius-xs: 6px;
  --radius-pill: 999px;
  /* Отступы: недостающие ступени */
  --space-0: 2px;
  --space-7: 32px;
  --space-8: 40px;
  /* Статусы текста/значков «сильным» цветом (читаются на светлом фоне) */
  --ok-strong: #15803D;
  --warn-strong: #B45309;
  --info: var(--accent);
  --info-muted: var(--accent-light);
  /* Брейкпоинты (в @media переменные недоступны — держим значения здесь):
     --bp-sm 640px (телефон) · --bp-md 900px (планшет/сайдбар) · --bp-lg 1100px (широкий экран) */
  --bp-sm: 640px;
  --bp-md: 900px;
  --bp-lg: 1100px;
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --gray-0: #121923;
  --gray-50: #0B0F14;
  --gray-100: #1A222D;
  --gray-200: #2A3441;
  --gray-300: #3D4A5C;
  --gray-400: #758296;
  --gray-500: #9AA6B5;
  --gray-600: #BFC7D2;
  --gray-700: #D8DDE5;
  --gray-800: #EDF0F4;
  --gray-900: #F6F8FA;
  --accent: #6BA0FF;
  --accent-hover: #558CF0;
  --accent-light: #1A2740;
  --accent-cyan: #38BDF8;
  --accent-glow: rgba(107, 134, 255, 0.22);
  --on-accent: #FFFFFF;
  --success: #34D399;
  --success-light: #0F2A22;
  --danger: #F87171;
  --danger-hover: #EF4444;
  --danger-light: #2A1418;
  --warning: #FBBF24;
  --warning-light: #2A2210;
  --bg: var(--gray-50);
  --bg2: #0E131A;
  --surface: var(--gray-0);
  --surface2: var(--gray-100);
  --surface3: #222B38;
  --text: var(--gray-900);
  --text2: var(--gray-600);
  --muted: var(--gray-400);
  --border: var(--gray-200);
  --border2: var(--gray-300);
  --ring: var(--accent);
  --brand: var(--accent);
  --brand-hover: var(--accent-hover);
  --brand-muted: var(--accent-light);
  --brand-glow: var(--accent-glow);
  --ok: var(--success);
  --ok-muted: var(--success-light);
  --fail: var(--danger);
  --fail-muted: var(--danger-light);
  --warn: var(--warning);
  --warn-muted: var(--warning-light);
  --sidebar-bg: var(--gray-0);
  --terminal-bg: #0B1220;
  --terminal-fg: #E2E8F0;
  --overlay: rgba(0, 0, 0, 0.65);
  --theme-meta: #0B0F14;
  --canvas-glow: none;
  --pop-black: var(--border);
  --pop-blue: var(--accent);
  --pop-yellow: var(--warning);
  --pop-red: var(--danger);
  --pop-shadow: var(--shadow-sm);
  --pop-shadow-sm: var(--shadow-xs);
  --ok-strong: #34D399;
  --warn-strong: #FBBF24;
}