/* ==========================================================================
   macOS 27 Golden Gate — токены для веб-CRM
   Подключать первым. Все компоненты читают только эти переменные.
   Тема:   <html data-theme="light|dark">  (без атрибута — по системе)
   Стекло: <html data-glass="clear|tinted"> (по умолчанию clear)
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---------- Типографика (шкала macOS, база 13px) ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --text-body: 13px;                              /* поднять до 14px для Windows */
  --text-large-title: calc(var(--text-body) * 2);    /* 26 — заголовок экрана */
  --text-title1: calc(var(--text-body) * 1.692);     /* 22 — крупные числа сводки */
  --text-title2: calc(var(--text-body) * 1.308);     /* 17 — заголовок раздела */
  --text-title3: calc(var(--text-body) * 1.154);     /* 15 — заголовок группы */
  --text-headline: var(--text-body);                 /* 13 полужирный */
  --text-callout: calc(var(--text-body) * 0.923);    /* 12 */
  --text-subhead: calc(var(--text-body) * 0.846);    /* 11 — подписи, шапка таблицы */
  --text-caption: calc(var(--text-body) * 0.77);     /* 10 */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-body: 1.38;
  --tracking-display: -0.022em;
  --tracking-body: -0.005em;

  /* ---------- Радиусы (тугие, как в Golden Gate) ---------- */
  --radius-window: 16px;   /* панели, листы, крупные группы */
  --radius-group: 12px;    /* группы настроек, карточки сводки */
  --radius-control: 8px;   /* поля, кнопки внутри контента */
  --radius-item: 6px;      /* пункты боковой панели, меню, строки выбора */
  --radius-badge: 5px;
  --radius-capsule: 999px; /* кнопки и поиск на панели инструментов */

  /* ---------- Отступы (сетка 4px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ---------- Размеры каркаса ---------- */
  --sidebar-width: 232px;
  --inspector-width: 340px;
  --toolbar-height: 52px;
  --row-height: 32px;          /* строка таблицы */
  --row-height-compact: 26px;  /* плотный режим: data-density="compact" */
  --control-height: 28px;
  --control-height-lg: 34px;

  /* ---------- Движение ---------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;

  /* ---------- Системные цвета: светлая тема ---------- */
  --c-red: #ff3b30;
  --c-orange: #ff9500;
  --c-yellow: #ffcc00;
  --c-green: #34c759;
  --c-mint: #00c7be;
  --c-teal: #30b0c7;
  --c-cyan: #32ade6;
  --c-blue: #007aff;
  --c-indigo: #5856d6;
  --c-purple: #af52de;
  --c-pink: #ff2d55;
  --c-brown: #a2845e;
  --c-gray: #8e8e93;

  --accent: var(--c-blue);
  --accent-hover: #0068d9;
  --accent-contrast: #ffffff;
  --accent-tint: color-mix(in srgb, var(--accent) 14%, transparent);

  /* Текст (метки) */
  --label-1: rgba(0, 0, 0, 0.86);
  --label-2: rgba(0, 0, 0, 0.56);
  --label-3: rgba(0, 0, 0, 0.32);
  --label-4: rgba(0, 0, 0, 0.18);

  /* Поверхности */
  --wallpaper: #e9ebf0;                 /* то, что «просвечивает» сквозь стекло */
  --wallpaper-glow-1: rgba(0, 122, 255, 0.10);
  --wallpaper-glow-2: rgba(175, 82, 222, 0.08);
  --surface-content: #ffffff;           /* фон таблиц и форм — сплошной */
  --surface-alt-row: rgba(0, 0, 0, 0.028);
  --surface-group: #ffffff;             /* группы настроек на фоне окна */
  --surface-window: #f5f5f7;            /* фон области содержимого под группами */
  --surface-control: #ffffff;
  --surface-control-pressed: rgba(0, 0, 0, 0.06);
  --surface-hover: rgba(0, 0, 0, 0.045);
  --surface-selected-inactive: rgba(0, 0, 0, 0.08);

  --separator: rgba(0, 0, 0, 0.09);
  --separator-strong: rgba(0, 0, 0, 0.16);
  --border-control: rgba(0, 0, 0, 0.13);

  /* ---------- Стекло ---------- */
  --glass-rgb: 250, 250, 252;
  --glass-alpha: 0.62;                  /* clear; tinted = 0.86 */
  --glass-blur: 28px;
  --glass-saturate: 180%;
  --glass-bg: rgba(var(--glass-rgb), var(--glass-alpha));
  --glass-edge: rgba(0, 0, 0, 0.10);            /* тёмная внешняя кромка */
  --glass-highlight: rgba(255, 255, 255, 0.85); /* светлый блик сверху */
  --glass-highlight-soft: rgba(255, 255, 255, 0.35);

  /* ---------- Тени (рассеянные) ---------- */
  --shadow-control: 0 0.5px 1px rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  --shadow-group: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 0 0 0.5px var(--glass-edge), 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-sheet: 0 0 0 0.5px var(--glass-edge), 0 24px 80px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.06);

  --focus-ring: 0 0 0 3.5px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---------- Тёмная тема: по системе ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-red: #ff453a;  --c-orange: #ff9f0a; --c-yellow: #ffd60a; --c-green: #30d158;
    --c-mint: #63e6e2; --c-teal: #40c8e0;   --c-cyan: #64d2ff;   --c-blue: #0a84ff;
    --c-indigo: #5e5ce6; --c-purple: #bf5af2; --c-pink: #ff375f; --c-brown: #ac8e68;
    --c-gray: #98989d;
    --accent-hover: #3395ff;

    --label-1: rgba(255, 255, 255, 0.88);
    --label-2: rgba(255, 255, 255, 0.58);
    --label-3: rgba(255, 255, 255, 0.30);
    --label-4: rgba(255, 255, 255, 0.16);

    --wallpaper: #15161a;
    --wallpaper-glow-1: rgba(10, 132, 255, 0.16);
    --wallpaper-glow-2: rgba(191, 90, 242, 0.10);
    --surface-content: #1e1e20;
    --surface-alt-row: rgba(255, 255, 255, 0.035);
    --surface-group: #262628;
    --surface-window: #1a1a1c;
    --surface-control: rgba(255, 255, 255, 0.10);
    --surface-control-pressed: rgba(255, 255, 255, 0.16);
    --surface-hover: rgba(255, 255, 255, 0.06);
    --surface-selected-inactive: rgba(255, 255, 255, 0.10);

    --separator: rgba(255, 255, 255, 0.09);
    --separator-strong: rgba(255, 255, 255, 0.16);
    --border-control: rgba(255, 255, 255, 0.12);

    --glass-rgb: 38, 38, 42;
    --glass-edge: rgba(0, 0, 0, 0.55);
    --glass-highlight: rgba(255, 255, 255, 0.16);
    --glass-highlight-soft: rgba(255, 255, 255, 0.06);

    --shadow-control: 0 0.5px 1px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
    --shadow-group: 0 0 0 0.5px rgba(255, 255, 255, 0.07);
    --shadow-float: 0 0 0 0.5px var(--glass-edge), 0 12px 44px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-sheet: 0 0 0 0.5px var(--glass-edge), 0 28px 90px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.35);
  }
}

/* ---------- Тёмная тема: принудительно ---------- */
:root[data-theme="dark"] {
  --c-red: #ff453a;  --c-orange: #ff9f0a; --c-yellow: #ffd60a; --c-green: #30d158;
  --c-mint: #63e6e2; --c-teal: #40c8e0;   --c-cyan: #64d2ff;   --c-blue: #0a84ff;
  --c-indigo: #5e5ce6; --c-purple: #bf5af2; --c-pink: #ff375f; --c-brown: #ac8e68;
  --c-gray: #98989d;
  --accent-hover: #3395ff;

  --label-1: rgba(255, 255, 255, 0.88);
  --label-2: rgba(255, 255, 255, 0.58);
  --label-3: rgba(255, 255, 255, 0.30);
  --label-4: rgba(255, 255, 255, 0.16);

  --wallpaper: #15161a;
  --wallpaper-glow-1: rgba(10, 132, 255, 0.16);
  --wallpaper-glow-2: rgba(191, 90, 242, 0.10);
  --surface-content: #1e1e20;
  --surface-alt-row: rgba(255, 255, 255, 0.035);
  --surface-group: #262628;
  --surface-window: #1a1a1c;
  --surface-control: rgba(255, 255, 255, 0.10);
  --surface-control-pressed: rgba(255, 255, 255, 0.16);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --surface-selected-inactive: rgba(255, 255, 255, 0.10);

  --separator: rgba(255, 255, 255, 0.09);
  --separator-strong: rgba(255, 255, 255, 0.16);
  --border-control: rgba(255, 255, 255, 0.12);

  --glass-rgb: 38, 38, 42;
  --glass-edge: rgba(0, 0, 0, 0.55);
  --glass-highlight: rgba(255, 255, 255, 0.16);
  --glass-highlight-soft: rgba(255, 255, 255, 0.06);

  --shadow-control: 0 0.5px 1px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
  --shadow-group: 0 0 0 0.5px rgba(255, 255, 255, 0.07);
  --shadow-float: 0 0 0 0.5px var(--glass-edge), 0 12px 44px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-sheet: 0 0 0 0.5px var(--glass-edge), 0 28px 90px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* ---------- Режимы стекла (аналог системного ползунка) ---------- */
:root[data-glass="tinted"] { --glass-alpha: 0.86; --glass-blur: 22px; }
:root[data-glass="clear"]  { --glass-alpha: 0.62; }
/* Плавная настройка: document.documentElement.style.setProperty('--glass-alpha', value) */

/* Системная настройка «уменьшить прозрачность» — стекло становится сплошным */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-alpha: 0.98; --glass-blur: 0px; }
}
/* Браузер без backdrop-filter — тоже сплошное */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-alpha: 0.97; }
}

/* ---------- Плотность ---------- */
:root[data-density="compact"] { --row-height: var(--row-height-compact); --control-height: 24px; }

/* ---------- Движение ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}