/* DOSSIER / NOIR TERMINAL — design tokens (single source of truth for new UI) */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-cyrillic-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-cyrillic-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-condensed-cyrillic-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-cyrillic-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-cyrillic-500.woff2') format('woff2');
}

/* Default + legacy */
:root,
[data-theme='noir'],
[data-theme='dark'] {
  --bg: #0a0a0b;
  --surface-1: #111113;
  --surface-2: #18181b;
  --line: #26262b;

  --text: #ece9e4;
  --text-secondary: #9a968f;
  --text-muted: #6b6862;

  --signal: #ff4d2e;
  --signal-dim: color-mix(in srgb, var(--signal) 18%, transparent);
  --data: #5fd3c8;
  --data-dim: color-mix(in srgb, var(--data) 14%, transparent);

  --status-ok: #7bd88f;
  --status-warn: #f2b84b;
  --status-error: #ff5470;
  --status-info: var(--data);

  --graph-bg: #0c0c0e;
  --graph-grid: rgba(255, 255, 255, 0.035);

  --font-display: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-2xl: 40px;

  --radius: 0px;
  --radius-sm: 2px;

  --motion-fast: 120ms;
  --motion-base: 180ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px var(--signal);

  /* layout (new shell) */
  --rail-w: 56px;
  --rail-w-open: 200px;
  --header-h: 48px;
  --bottom-nav-h: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Breakpoints (keep in sync with js/viewport.js) */
  --bp-phone-max: 767px;
  --bp-tablet-min: 768px;
  --bp-tablet-max: 1023px;
  --bp-desktop-min: 1024px;
}

/* Мягкая тёмная — меньше контраста */
[data-theme='dim'] {
  --bg: #121214;
  --surface-1: #18181c;
  --surface-2: #1f1f24;
  --line: #2e2e34;
  --text: #d8d4cc;
  --text-secondary: #8a8680;
  --text-muted: #5c5954;
  --graph-bg: #121214;
  --graph-grid: rgba(255, 255, 255, 0.028);
}

/* Холодная тёмная */
[data-theme='slate'] {
  --bg: #0c1014;
  --surface-1: #111820;
  --surface-2: #161e28;
  --line: #243040;
  --text: #e4eaf0;
  --text-secondary: #8a9aaa;
  --text-muted: #5a6878;
  --data: #6ec4bc;
  --graph-bg: #0c1014;
  --graph-grid: rgba(120, 160, 200, 0.06);
}

/* Светлая «бумага» — без белого #fff */
[data-theme='paper'] {
  --bg: #c8c4bc;
  --surface-1: #d4d0c8;
  --surface-2: #ddd9d2;
  --line: #a8a49c;
  --text: #1c1a18;
  --text-secondary: #4a4742;
  --text-muted: #6a6660;
  --signal-dim: color-mix(in srgb, var(--signal) 14%, transparent);
  --data-dim: color-mix(in srgb, var(--data) 14%, transparent);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px var(--signal);
  --graph-bg: #b8b4ac;
  --graph-grid: rgba(0, 0, 0, 0.07);
}

/* Светлая классическая (приглушённая) */
[data-theme='light'] {
  --bg: #d8d4cc;
  --surface-1: #e2ded6;
  --surface-2: #ebe7e0;
  --line: #b8b4ac;
  --text: #141414;
  --text-secondary: #5c5852;
  --text-muted: #7a756d;
  --signal-dim: color-mix(in srgb, var(--signal) 12%, transparent);
  --data-dim: color-mix(in srgb, var(--data) 12%, transparent);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px var(--signal);
  --graph-bg: #ccc8c0;
  --graph-grid: rgba(0, 0, 0, 0.06);
}

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

.dossier-root {
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.dossier-kicker {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.dossier-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}