/* ==========================================================================
   СнабКонтроль — дизайн-система по макету Google Stitch «Smart Supply AI».
   Токены перенесены из tailwind.config макета один в один (hex/px).
   Шрифты размещены локально: строгий CSP запрещает внешние CDN и Google Fonts.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/vendor/inter/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Mono 500 — цифры и коды (в макете font-data-mono) */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/vendor/jetbrains/JetBrainsMono-Medium-cyrillic.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/vendor/jetbrains/JetBrainsMono-Medium-cyrillic-ext.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/vendor/jetbrains/JetBrainsMono-Medium-latin-ext.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/vendor/jetbrains/JetBrainsMono-Medium-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Material Symbols Outlined — иконки макета. Шрифт урезан до 68 используемых
   символов (15 КБ вместо 1,1 МБ), оси FILL и wght сохранены. */
@font-face {
  font-family: "Material Symbols Outlined";
  src: url("/vendor/material/MaterialSymbolsSubset.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: block;
}

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

  /* --- поверхности (Stitch: background / surface / surface-container-*) --- */
  --bg: #F3F0F8;              /* рабочая область: secondary 5% над background */
  --surface: #FBF8FF;         /* карточки, верхняя панель */
  --surface-2: #F3F2FF;       /* боковое меню, шапка таблицы */
  --surface-3: #EDEDFB;       /* наведение */
  --surface-4: #E7E7F5;
  --surface-lowest: #FFFFFF;
  --surface-variant: #E1E1EF;

  /* --- линии и текст --- */
  --line: #C3C5D9;            /* outline-variant */
  --line-strong: #737688;     /* outline */
  --text: #191B25;            /* on-surface */
  --text-2: #434656;          /* on-surface-variant */
  --muted: #737688;

  /* --- основной цвет действия (primary #003ec7) --- */
  --accent: #003EC7;
  --accent-ink: #FFFFFF;
  --accent-hover: #0052FF;
  --accent-soft: rgba(0, 62, 199, .10);
  --accent-soft-line: rgba(0, 62, 199, .20);
  --accent-fixed: #DDE1FF;
  --accent-fixed-dim: #B7C4FF;
  --on-accent-fixed: #001452;

  /* --- вторичный и третичный (для нейтральных и «в пути») --- */
  --secondary: #565E74;
  --secondary-container: #DAE2FD;
  --on-secondary-container: #5C647A;
  --tertiary: #3F4F65;
  --tertiary-soft: rgba(87, 103, 126, .10);
  --tertiary-soft-line: rgba(63, 79, 101, .20);
  --tertiary-fixed: #D3E4FE;

  /* --- статусы --- */
  --success: #003EC7;         /* «Принято» в макете — синий primary */
  --success-bg: rgba(0, 62, 199, .10);
  --warning: #5C647A;         /* «Частично» — вторичный контейнер */
  --warning-bg: #DAE2FD;
  --danger: #BA1A1A;          /* error */
  --danger-bg: rgba(186, 26, 26, .10);
  --danger-container: #FFDAD6;
  --on-danger-container: #93000A;
  --info: #3F4F65;            /* «В пути» — tertiary */
  --info-bg: rgba(87, 103, 126, .10);
  --neutral: #434656;
  --neutral-bg: #E1E1EF;
  --link: #003EC7;
  --steel: #2E303A;

  /* --- боковое меню (в макете светлое в светлой теме) --- */
  --sidebar-bg: #F3F2FF;
  --sidebar-text: #434656;
  --sidebar-text-strong: #191B25;
  --sidebar-muted: #737688;
  --sidebar-line: #C3C5D9;
  --sidebar-hover: #E1E1EF;

  /* --- геометрия (Stitch borderRadius: 2 / 4 / 8 / 12) --- */
  --radius: 2px;
  --radius-sm: 2px;
  --radius-lg: 4px;
  --radius-xl: 8px;
  --radius-pill: 12px;

  /* --- тени: у карточек их нет, только у вторичных кнопок --- */
  --shadow: 0 8px 24px rgba(25, 27, 37, .10);
  --shadow-sm: 0 2px 4px -1px rgba(0, 0, 0, .06);
  --shadow-pop: 0 8px 24px rgba(25, 27, 37, .14);
  --shadow-card: none;
  --focus: 0 0 0 3px rgba(0, 62, 199, .22);

  /* --- типографика макета --- */
  --font-ui: Inter, "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- шаг сетки (Stitch spacing) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --ink: var(--text);
  --ink-2: var(--text-2);
  --paper: var(--bg);
  --panel: var(--surface);
  --steel-soft: var(--info-bg);
  --signal: var(--accent);
  --green: var(--success);
  --red: var(--danger);
  --blue: var(--info);
  --accent-2: var(--steel);
  --brand: var(--accent);

  /* Словомарк: «Снаб» графит, «Контроль» синий primary */
  --wm-gor: #191B25;
  --wm-stroy: #003EC7;
  --wm-suffix: #737688;
  --code-bg: #EDEDFB;
  --code-ink: #191B25;
  --ink-solid-bg: #F3F2FF;
  --ink-solid-ink: #191B25;
  /* используется старыми правилами верхней панели и меню */
  --chrome-bg: #FBF8FF;
}

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

  /* Тёмная тема макета: near-black #121212 у меню, карточки #1E293B */
  --bg: #0E0F14;
  --surface: #1E293B;
  --surface-2: #121212;
  --surface-3: #263349;
  --surface-4: #2E303A;
  --surface-lowest: #121212;
  --surface-variant: #2E303A;

  --line: #737688;
  --line-strong: #8C90A3;
  --text: #F0EFFE;
  --text-2: #C3C5D9;
  --muted: #A3A6BA;

  --accent: #B7C4FF;          /* inverse-primary — читаемый синий на тёмном */
  --accent-ink: #001452;
  --accent-hover: #DDE1FF;
  --accent-soft: rgba(183, 196, 255, .14);
  --accent-soft-line: rgba(183, 196, 255, .28);
  --accent-fixed: #DDE1FF;
  --accent-fixed-dim: #B7C4FF;
  --on-accent-fixed: #001452;

  --secondary: #BEC6E0;
  --secondary-container: #3F465C;
  --on-secondary-container: #DAE2FD;
  --tertiary: #B7C8E1;
  --tertiary-soft: rgba(183, 200, 225, .14);
  --tertiary-soft-line: rgba(183, 200, 225, .28);
  --tertiary-fixed: #D3E4FE;

  --success: #B7C4FF;
  --success-bg: rgba(183, 196, 255, .14);
  --warning: #DAE2FD;
  --warning-bg: #3F465C;
  --danger: #FFB4AB;
  --danger-bg: rgba(255, 180, 171, .14);
  --danger-container: #3B1113;   /* приглушённая подложка тревожной плитки */
  --on-danger-container: #FFDAD6;
  --info: #B7C8E1;
  --info-bg: rgba(183, 200, 225, .14);
  --neutral: #C3C5D9;
  --neutral-bg: #2E303A;
  --link: #B7C4FF;
  --steel: #F0EFFE;

  --sidebar-bg: #121212;
  --sidebar-text: #C3C5D9;
  --sidebar-text-strong: #F0EFFE;
  --sidebar-muted: #A3A6BA;
  --sidebar-line: #737688;
  --sidebar-hover: #3F465C;

  --shadow: 0 24px 70px rgba(0, 0, 0, .55);
  --shadow-sm: 0 2px 4px -1px rgba(0, 0, 0, .5);
  --shadow-pop: 0 18px 44px rgba(0, 0, 0, .6);
  --shadow-card: none;
  --focus: 0 0 0 3px rgba(183, 196, 255, .30);

  --ink: var(--text);
  --ink-2: var(--text-2);
  --paper: var(--bg);
  --panel: var(--surface);
  --steel-soft: var(--info-bg);
  --signal: var(--accent);
  --green: var(--success);
  --red: var(--danger);
  --blue: var(--info);
  --accent-2: var(--steel);
  --brand: var(--accent);

  --wm-gor: #F0EFFE;
  --wm-stroy: #B7C4FF;
  --wm-suffix: #A3A6BA;
  --code-bg: #121212;
  --code-ink: #C3C5D9;
  --ink-solid-bg: #121212;
  --ink-solid-ink: #F0EFFE;
  --chrome-bg: #1E293B;
}

/* --------------------------------------------------------------------------
   Иконки Material Symbols (как в макете)
   -------------------------------------------------------------------------- */
.msym {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  flex: none;
}

.msym--fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.msym--14 { font-size: 14px; }
.msym--16 { font-size: 16px; }
.msym--18 { font-size: 18px; }
.msym--20 { font-size: 20px; }

/* --------------------------------------------------------------------------
   Словомарк «СнабКонтроль» — по макету: название + подпись под ним
   -------------------------------------------------------------------------- */
.wordmark {
  display: inline-grid;
  gap: 2px;
  line-height: 1;
  justify-items: start;
  user-select: none;
}

.wordmark-name {
  color: var(--wm-gor);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.wordmark-name b {
  color: var(--wm-stroy);
  font-weight: inherit;
}

.wordmark-suffix {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wm-suffix);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.wordmark--sm .wordmark-name { font-size: 17px; line-height: 24px; }
.wordmark--sm .wordmark-suffix { font-size: 11px; }

.wordmark--lg { gap: 6px; justify-items: center; }
.wordmark--lg .wordmark-name { font-size: clamp(30px, 8vw, 36px); line-height: 44px; letter-spacing: -0.02em; }
.wordmark--lg .wordmark-suffix { font-size: 14px; }

.wordmark--on-dark {
  --wm-gor: #F0EFFE;
  --wm-stroy: #B7C4FF;
  --wm-suffix: #A3A6BA;
}