/* ============================================================
   === ДИЗАЙН-ТОКЕНЫ ЗАМОРОЖЕНЫ (T199) === контракт для вкладок 2-5.
   Имена и значения токенов ниже считать стабильными. Менять —
   только через явный регресс-проход по всем шаблонам и styleguide.
   Вкладки 2-5 ПОТРЕБЛЯЮТ токены, но НЕ переопределяют их.
   ============================================================ */
/*
  Servis Mobile design tokens.
  Dark theme only. Existing portal token names are preserved as compatibility anchors.
*/
/* Опциональный Inter (variable). Если CDN недоступен — фолбэк на system-ui. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://rsms.me/inter/font-files/InterVariable.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* Existing portal tokens: keep these names stable. */
  --bg: #0f1115;
  --card: #181b22;
  --card-2: #1b1f27;
  --line: #272b35;
  --txt: #e6e8ee;
  --muted: #9aa3b2;
  --accent: #3b82f6;
  --accent-700: #2563eb;
  --ok: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;
  --row-alt: #15181f;
  --row-hover: #1d212b;
  --field-bg: #11141a;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .28);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, .32);
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --lh: 1.5;

  /* Neutral surface scale. */
  --surface-0: var(--bg);
  --surface-1: #12151b;
  --surface-2: var(--card);
  --surface-3: var(--card-2);
  --surface-4: #222733;
  --surface-raised: #1e232e;
  --surface-sunken: #0b0d12;
  --surface-hover: var(--row-hover);
  --border: var(--line);
  --border-strong: #363c49;
  --text: var(--txt);
  --text-muted: var(--muted);
  --text-subtle: #7f8998;
  --text-inverse: #06101f;

  /* Accent scale. Current --accent is the 500 step. */
  --accent-50: #eff6ff;
  --accent-100: #dbeafe;
  --accent-200: #bfdbfe;
  --accent-300: #93c5fd;
  --accent-400: #60a5fa;
  --accent-500: var(--accent);
  --accent-600: #2563eb;
  --accent-800: #1d4ed8;
  --accent-900: #1e3a8a;
  --accent-soft: rgba(59, 130, 246, .16);
  --accent-line: rgba(96, 165, 250, .38);

  /* Semantic scale. Bridges point to the existing portal names. */
  --success: var(--ok);
  --success-soft: rgba(34, 197, 94, .14);
  --warning: var(--warn);
  --warning-soft: rgba(245, 158, 11, .16);
  --danger: var(--bad);
  --danger-soft: rgba(239, 68, 68, .15);
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, .14);

  /* Chart palette: distinguishable on dark surfaces. */
  --chart-1: #60a5fa;
  --chart-2: #34d399;
  --chart-3: #fbbf24;
  --chart-4: #f87171;
  --chart-5: #a78bfa;
  --chart-6: #22d3ee;
  --chart-7: #fb7185;
  --chart-8: #c084fc;
  --chart-grid: rgba(154, 163, 178, .16);
  --chart-axis: rgba(154, 163, 178, .66);

  /* Typography. */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --fs-2xs: 11px;
  --fs-3xl: 30px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-title: 1.3;
  --lh-body: var(--lh);
  --lh-loose: 1.7;

  /* Extended spacing. */
  --sp-0: 0;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;

  /* Radius, elevation, layering. */
  --r-xs: 4px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --shadow-3: 0 18px 48px rgba(0, 0, 0, .36);
  --shadow-4: 0 24px 72px rgba(0, 0, 0, .42);
  --z-base: 1;
  --z-sticky: 20;
  --z-dropdown: 50;
  --z-overlay: 80;
  --z-modal: 90;
  --z-toast: 100;

  /* Motion. */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-standard: cubic-bezier(.2, 0, 0, 1);

  /* Interaction tokens. */
  --focus-ring: 0 0 0 3px rgba(59, 130, 246, .42);
  --focus-line: #93c5fd;
  --overlay: rgba(3, 7, 18, .72);
  --skeleton-a: #202530;
  --skeleton-b: #2b3341;
  --scrollbar-track: rgba(255, 255, 255, .03);
  --scrollbar-thumb: rgba(154, 163, 178, .34);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
  }
}