/* HYPEDROP: токены, сброс и базовая типографика. Источник значений: design/project/UIKit.dc.html */

:root {
  /* цвета */
  --ink: #111111;
  --white: #ffffff;
  --panel: #F4F4F1;
  --panel-2: #FAFAF8;
  --line: #E4E4E0;
  --line-2: #D2D2CD;
  --border: #8A8A85;          /* граница полей и чипов, 3:1 */
  --border-soft: #DCDCD7;
  --muted: #5C5C58;           /* вторичный текст, 6,7:1 */
  --muted-2: #3F3F3B;
  --placeholder: #6E6E69;
  --disabled-bg: #E4E4E0;
  --disabled-fg: #55554F;
  --lime: #D4FF3F;            /* акцент */
  --drop: #FF5A1F;
  --error: #B4161B;
  --error-dark: #8A0F13;
  --error-bg: #FFF1F1;
  --warn: #B45309;
  --warn-bg: #FFF8EB;
  --warn-text: #7C2D12;
  --focus: #2563EB;
  --ok: #166534;
  --ok-bg: #DCFCE7;

  /* статусы заказа (К3) */
  --st-created-bg: #DBEAFE;   --st-created-fg: #1E40AF;
  --st-paid-bg: #EDE9FE;      --st-paid-fg: #5B21B6;
  --st-shipped-bg: #FEF3C7;   --st-shipped-fg: #92400E;
  --st-delivered-bg: #DCFCE7; --st-delivered-fg: #166534;
  --st-cancelled-bg: #E7E7E4; --st-cancelled-fg: #3F3F46;

  /* шрифты */
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-display: 'Unbounded', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* форма */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --container: 1280px;
  --gutter: 32px;
  --header-h: 64px;
  --t: 0.15s;                 /* переходы не длиннее 200 мс */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-width: 1024px;          /* мобильной версии нет */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.45;
}

h1, h2, h3, p { margin-top: 0; }
a { color: var(--ink); }
a:hover { color: var(--muted-2); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

[hidden] { display: none !important; }

.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;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--lime); color: var(--ink); padding: 10px 16px; border-radius: var(--r); font-weight: 600;
}
.skip-link:focus { top: 8px; }

.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--muted); }
.cap { font-size: 14px; color: var(--muted); }
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}