/* arbly-ui/tokens.css — новая дизайн-система панели arbly.
 * Имена переменных совпадают с текущим css/tokens.css, чтобы файл
 * можно было подменить в проекте без правки разметки.
 * Светлая тема — по умолчанию (:root); тёмная — [data-theme="dark"] / .dark. */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..800&family=JetBrains+Mono:wght@400..700&display=swap');

*, *::before, *::after { box-sizing: border-box; }

:root,
:root[data-theme="light"],
.light {
  color-scheme: light;

  /* Поверхности — тёплая нейтральная база */
  --bg-canvas: #f6f3ee;
  --bg-surface: #ffffff;
  --bg-elevated: #f4f1ec;
  --bg-input: #faf8f5;
  --bg-hover: #efebe5;
  --bg-selected: #efe9fb;
  --border-subtle: #ece7df;
  --border-default: #ddd6cc;
  --border-strong: #b9b0a4;
  --control-border: #9c938a;  /* 3:1 — граница чекбоксов и радио */
  --toggle-knob: #ffffff;

  /* Текст */
  --text-primary: #1e1b24;
  --text-secondary: #4b4656;
  --text-tertiary: #6f6979;
  --text-muted: #787283;      /* 4.6:1 на белом — подписи 11px */
  --text-on-accent: #ffffff;

  /* Бренд — единственный хроматический акцент */
  --accent: #7544d8;
  --accent-hover: #6634c4;
  --accent-strong: #7544d8;
  --accent-soft-text: #5b2fbf;
  --accent-soft-bg: #efe9fb;
  --accent-soft-border: #d7c9f6;

  /* Статусы — мягкая заливка + насыщенный текст */
  --ok: #1e8e5a;
  --ok-soft-bg: #e4f5ec;
  --warn: #a86a08;
  --warn-soft-bg: #fbf0da;
  --danger: #cf3b55;
  --danger-solid: #cf3b55;
  --on-danger: #ffffff;
  --danger-soft-bg: #fce7eb;
  --info: #2b66c9;
  --info-soft-bg: #e6eefb;

  /* Глубина */
  --focus-ring: #7544d8;
  --scrim: rgba(30, 22, 44, 0.45);
  --shadow-sm: 0 1px 2px rgba(48, 36, 70, 0.06), 0 1px 1px rgba(48, 36, 70, 0.04);
  --shadow-md: 0 6px 20px rgba(48, 36, 70, 0.08);
  --shadow-lg: 0 20px 48px rgba(48, 36, 70, 0.14);

  /* HH — только для маркеров интеграции */
  --brand-hh: #d9531e;

  /* Тост — инвертированный */
  --toast-bg: #1e1b24;
  --toast-fg: #ffffff;
  --toast-border: transparent;
}

:root[data-theme="dark"],
.dark {
  color-scheme: dark;

  --bg-canvas: #15131a;
  --bg-surface: #1d1a24;
  --bg-elevated: #26222f;
  --bg-input: #221e2b;
  --bg-hover: #2c2737;
  --bg-selected: #33284a;
  --border-subtle: #2c2836;
  --border-default: #3e3849;
  --border-strong: #5a5268;
  --control-border: #6b6379;
  --toggle-knob: #1d1a24;

  --text-primary: #f5f2f9;
  --text-secondary: #cfc8da;
  --text-tertiary: #a69fb4;
  --text-muted: #8f889f;      /* 5:1 на поверхности */
  --text-on-accent: #ffffff;

  /* --accent — заливки (белый текст 5:1), --accent-strong — текст, иконки, линии графиков (6.4:1) */
  --accent: #7d50e0;
  --accent-hover: #6f42d2;
  --accent-strong: #ab8cf3;
  --accent-soft-text: #cdbcfa;
  --accent-soft-bg: rgba(143, 99, 234, 0.18);
  --accent-soft-border: rgba(169, 132, 239, 0.45);

  --ok: #4fcf8e;
  --ok-soft-bg: rgba(79, 207, 142, 0.14);
  --warn: #f0b94b;
  --warn-soft-bg: rgba(240, 185, 75, 0.14);
  --danger: #f27c90;
  --danger-solid: #c9364f;
  --on-danger: #ffffff;
  --danger-soft-bg: rgba(242, 124, 144, 0.14);
  --info: #7fb0ff;
  --info-soft-bg: rgba(127, 176, 255, 0.14);

  --focus-ring: #b997ff;
  --scrim: rgba(6, 4, 10, 0.66);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.5);

  --brand-hh: #ff914d;

  --toast-bg: #2f2a3b;
  --toast-fg: #f5f2f9;
  --toast-border: #463f55;
}

:root {
  /* Типографика */
  --font-sans: "Golos Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-display: 32px;
  --fs-title: 24px;
  --fs-section: 18px;
  --fs-body: 14px;
  --fs-secondary: 13px;
  --fs-small: 12px;
  --fs-label: 11px;
  --fs-micro: 10px;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --fw-heavy: 700;

  /* Отступы */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;

  /* Радиусы — мягкие */
  --radius-4: 6px;
  --radius-6: 8px;
  --radius-8: 12px;
  --radius-12: 14px;
  --radius-16: 20px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-pill: 9999px;

  /* Каркас */
  --sidebar-width: 232px;
  --sidebar-collapsed: 72px;
  --health-strip-height: 0px;
  --bottom-tab-content-height: 64px;
  --bottom-tab-height: calc(var(--bottom-tab-content-height) + env(safe-area-inset-bottom, 0px));
  --content-max-width: 1440px;
  --touch-target: 40px;

  /* Слои */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-overlay: 1200;
  --z-modal: 1300;
  --z-popover: 1400;
  --z-toast: 2100;

  /* Движение — коротко, без пружин */
  --dur-micro: 90ms;
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --dur-xslow: 460ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-spring: cubic-bezier(0.2, 0, 0, 1);
  --move-sm: 4px;
  --move-md: 8px;
  --move-lg: 12px;
  --stagger-step: 30ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-xslow: 0ms;
  }
}