/*
 * Дизайн-токены ВизПотолка и «Замерщика» (#357, зонтичная #350).
 * Утверждённые макеты: docs/design/nav-mockups/README.md.
 *
 * Единственное место, где в CSS разрешены цвета #rrggbb: всё остальное
 * (styles.css, three-d-app.css, ui-components.css) берёт var(--color-…).
 * Проверка — tests/design-tokens.test.mjs.
 *
 * Тема. По умолчанию — светлая. Тёмная включается атрибутом на <html>:
 *   data-theme="dark"  — всегда тёмная;
 *   data-theme="auto"  — как в системе телефона/компьютера;
 *   data-theme="light" или без атрибута — светлая.
 * Переключатель в настройках аккаунта — #362. Пока не все экраны переведены
 * на токены (#359–#362), тёмная тема включается только явно.
 *
 * Цвет акцента — один токен (--color-accent): владелец может сменить его позже.
 * Компании со своим оформлением (app.js, presentation.js) по-прежнему
 * переопределяют старые имена --blue, --bg, --surface… — они ниже связаны
 * с новыми токенами.
 */

@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/onest-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/onest-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/onest-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/onest-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/onest-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/onest-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/onest-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/onest-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --- Светлая тема (по умолчанию) ------------------------------------------ */
:root {
  color-scheme: light;

  /* Поверхности */
  --color-bg: #F3F4F6;            /* фон экрана */
  --color-surface: #FFFFFF;       /* карточки, шапки, нижний бар */
  --color-surface-2: #F7F8FA;     /* подложка внутри карточки, полосы таблиц */
  --color-surface-3: #EEF0F3;     /* подложка переключателей, поля только для чтения */
  --color-line: #E1E4E9;          /* рамки и разделители */
  --color-line-strong: #C3CAD4;   /* рамки полей, пунктир «+ Добавить» */

  /* Текст */
  --color-ink: #14171C;           /* основной текст */
  --color-ink-2: #5B6370;         /* вторичный текст, подписи */
  --color-ink-3: #3B4656;         /* подзаголовки и подписи полей */

  /* Акцент — один цвет на всё приложение */
  --color-accent: #1F5BD6;        /* главная кнопка, активная вкладка, ссылки */
  --color-accent-strong: #1747AB; /* нажатие/наведение на акцент */
  --color-accent-ink: #FFFFFF;    /* текст на акценте */
  --color-accent-soft: #E6EEFC;   /* бледный акцент: выделенная строка, бейдж */
  --color-accent-soft-2: #CFDDF8; /* рамка выделенного, светлые линии схемы */
  --color-accent-muted: #8FAEE8;  /* неактивный акцент, вспомогательные линии */

  /* Статусы */
  --color-ok: #1B7340;            /* готово, отправлено */
  --color-ok-soft: #E3F4EA;
  --color-warn: #8A5200;          /* не хватает данных */
  --color-warn-soft: #FFF1D6;
  --color-danger: #C0352B;        /* удаление, ошибка */
  --color-danger-soft: #FDECEA;
  --color-danger-inverse: #FFB4AC;

  /* Цвета схем и планов (светильники, линии света, отметки) */
  --color-highlight: #E9A21A;
  --color-highlight-soft: #FFF6DA;
  --color-violet: #7A3FB0;
  --color-rose: #B03F5E;
  --color-rose-soft: #FBEFF2;
  --color-scrim: rgba(20, 23, 28, 0.45); /* затемнение под диалогом */

  /* Шрифт */
  --font-sans: 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 13px;
  --text-sm: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;

  /* Отступы — шаг 4 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Скругления */
  --radius-sm: 8px;   /* поля, чипсы */
  --radius-md: 12px;  /* кнопки, карточки */
  --radius-lg: 20px;  /* нижние панели */
  --radius-pill: 999px;

  /* Высоты */
  --height-button: 48px;
  --height-button-compact: 40px;
  --height-field: 48px;
  --height-header: 56px;
  --height-bottom-bar: 64px;
  --touch-min: 44px;

  /* Тени */
  --shadow-1: 0 1px 2px rgba(20, 23, 28, 0.08);
  --shadow-2: 0 6px 20px rgba(20, 23, 28, 0.16);

  /* Старые имена — их читают уже написанные стили и оформление компаний */
  --ink: var(--color-ink);
  --muted: var(--color-ink-2);
  --line: var(--color-line);
  --blue: var(--color-accent);
  --blue-dark: var(--color-accent-strong);
  --blue-pale: var(--color-accent-soft);
  --surface: var(--color-surface);
  --header-bg: var(--color-surface);
  --header-ink: var(--color-ink);
  --bg: var(--color-bg);
  --widget-radius: 24px;
}

/* --- Тёмная тема ------------------------------------------------------------ */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0E1013;
  --color-surface: #171A1F;
  --color-surface-2: #1B1F25;
  --color-surface-3: #21252C;
  --color-line: #2A2F37;
  --color-line-strong: #3C4450;
  --color-ink: #ECEEF1;
  --color-ink-2: #9AA3AF;
  --color-ink-3: #C2CAD5;
  --color-accent: #6E9BFF;
  --color-accent-strong: #93B4FF;
  --color-accent-ink: #0B1020;
  --color-accent-soft: #1A2744;
  --color-accent-soft-2: #26385E;
  --color-accent-muted: #4A6AA8;
  --color-ok: #5CC98A;
  --color-ok-soft: #14301F;
  --color-warn: #F2B755;
  --color-warn-soft: #3A2C12;
  --color-danger: #FF6B5E;
  --color-danger-soft: #3A1715;
  --color-danger-inverse: #9C2118;
  --color-highlight: #F5B642;
  --color-highlight-soft: #3A2E12;
  --color-violet: #B48AE6;
  --color-rose: #E68AA5;
  --color-rose-soft: #3A1A24;
  --color-scrim: rgba(0, 0, 0, 0.6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --color-bg: #0E1013;
    --color-surface: #171A1F;
    --color-surface-2: #1B1F25;
    --color-surface-3: #21252C;
    --color-line: #2A2F37;
    --color-line-strong: #3C4450;
    --color-ink: #ECEEF1;
    --color-ink-2: #9AA3AF;
    --color-ink-3: #C2CAD5;
    --color-accent: #6E9BFF;
    --color-accent-strong: #93B4FF;
    --color-accent-ink: #0B1020;
    --color-accent-soft: #1A2744;
    --color-accent-soft-2: #26385E;
    --color-accent-muted: #4A6AA8;
    --color-ok: #5CC98A;
    --color-ok-soft: #14301F;
    --color-warn: #F2B755;
    --color-warn-soft: #3A2C12;
    --color-danger: #FF6B5E;
    --color-danger-soft: #3A1715;
  --color-danger-inverse: #9C2118;
    --color-highlight: #F5B642;
    --color-highlight-soft: #3A2E12;
    --color-violet: #B48AE6;
    --color-rose: #E68AA5;
    --color-rose-soft: #3A1A24;
    --color-scrim: rgba(0, 0, 0, 0.6);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.55);
  }
}