/* ================================================================
   tokens.css — Design tokens for ERP велопроката
   Source of truth: docs/DESIGN_SYSTEM.md
   Версия: v1.0 (2026-05-07)
   ================================================================ */

:root {
  /* === Backgrounds === */
  --color-bg-page: #F5F4F1;
  --color-bg-surface: #FFFFFF;
  --color-bg-surface-2: #FAFAF8;
  --color-bg-muted: #F1EFE8;

  /* === Text === */
  --color-text-primary: #1F1F1F;
  --color-text-secondary: #6B6A66;
  --color-text-muted: #9A9893;
  --color-text-inverse: #FFFFFF;

  /* === Borders === */
  --color-border: #ECEBE6;
  --color-border-hover: #C9C7C2;

  /* === Accents === */
  --color-accent: #FE5E0E;
  --color-accent-hover: #D85A30;
  --color-accent-soft: rgba(254, 94, 14, 0.08);
  --color-yellow: #FFCC00;
  --color-yellow-soft: rgba(255, 204, 0, 0.12);

  /* === Status === */
  --color-success: #34B26B;
  --color-success-soft: rgba(52, 178, 107, 0.10);
  --color-danger: #CE3313;
  --color-danger-soft: rgba(206, 51, 19, 0.08);

  /* === Dark surfaces (CTA) === */
  --color-cta-bg: #1F1F1F;
  --color-cta-bg-hover: #2E2E2E;
  --color-cta-text: #FFFFFF;

  /* === Typography === */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Monaco, monospace;

  /* font sizes */
  --text-eyebrow: 9px;
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 15px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 32px;
  --text-4xl: 48px;

  /* weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* === Spacing (8-pt grid + 4) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* === Radii === */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-tile: 14px;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* === Shadows === */
  --shadow-soft: 0 8px 24px rgba(20, 20, 30, 0.06);
  --shadow-pop: 0 16px 48px rgba(20, 20, 30, 0.08);

  /* === Transitions === */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}

/* ================================================================
   Base styles
   ================================================================ */

html,
body {
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

/* Inter ships with `cv11` for tabular figures by default off.
   We enable it project-wide for consistency in numbers. */
body {
  font-feature-settings: 'cv11', 'ss01';
}

/* ================================================================
   Utility: tabular numbers
   Use on any element with numeric data (KPI, table cells, totals).
   ================================================================ */

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' on;
}

/* ================================================================
   Utility: split-color KPI numbers
   <span class="num">247<span class="dim">,3K</span></span>
   ================================================================ */

.num .dim {
  color: var(--color-text-muted);
}

/* ================================================================
   Utility: visually hidden (sr-only)
   ================================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================
   Form reset (минимальный — Tailwind preflight уже многое сделает,
   но мы дополняем под нашу систему)
   ================================================================ */

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

/* Убираем встроенные стрелки у number-инпутов — они ломают плотность */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* ================================================================
   Hairline border helper
   На retina/HiDPI рисуется тоньше, чем 1px — для очень тонких
   разделителей в таблицах. Использовать осторожно.
   ================================================================ */

.hairline-bottom {
  border-bottom: 0.5px solid var(--color-border);
}

.hairline-top {
  border-top: 0.5px solid var(--color-border);
}

/* ================================================================
   Focus ring (для интерактивных элементов вне форм)
   Кнопки, ссылки, кликабельные карточки.
   ================================================================ */

.focus-ring:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ================================================================
   Scrollbar (опционально, тонкий стиль под систему)
   ================================================================ */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-bg-page);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-hover);
}