/* VELIQ design tokens — СГЕНЕРИРОВАНО из design/tokens/tokens.json.
   Не править вручную: python3 design/tools/build-tokens.py */

@font-face {
  font-family: "Onest";
  src: url("fonts/Onest-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --c-ink-950: #0A0A0B;
  --c-ink-900: #131417;
  --c-ink-850: #1A1C20;
  --c-ink-800: #22252A;
  --c-ink-700: #30343B;
  --c-ink-600: #474C55;
  --c-ink-500: #696F79;
  --c-ink-400: #8E939C;
  --c-ink-300: #B5B9BF;
  --c-ink-200: #D6D9DD;
  --c-ink-100: #E9EBEE;
  --c-ink-50: #F4F5F7;
  --c-white: #FFFFFF;
  --c-signal-300: #FF8C6B;
  --c-signal-500: #F0502A;
  --c-signal-600: #D8431F;
  --c-signal-700: #B03413;
  --c-fjord-400: #7FA2FF;
  --c-fjord-600: #3D63D6;
  --c-ok-400: #3CCB8B;
  --c-ok-600: #13804F;
  --c-warn-400: #F2C14A;
  --c-warn-600: #9A6A00;
  --c-danger-400: #FF6B7F;
  --c-danger-600: #C42A42;
  --bg: var(--c-white);
  --bg-sunken: var(--c-ink-50);
  --bg-raised: var(--c-white);
  --bg-inverse: var(--c-ink-950);
  --line: var(--c-ink-100);
  --line-strong: var(--c-ink-200);
  --text: var(--c-ink-950);
  --text-muted: var(--c-ink-600);
  --text-faint: var(--c-ink-500);
  --text-inverse: var(--c-white);
  --accent: var(--c-signal-500);
  --accent-text: var(--c-signal-700);
  --on-accent: var(--c-ink-950);
  --control: var(--c-ink-950);
  --on-control: var(--c-white);
  --control-hover: var(--c-ink-800);
  --data-direct: var(--c-ink-500);
  --data-hel: var(--c-signal-500);
  --data-swe: var(--c-fjord-600);
  --ok: var(--c-ok-600);
  --warn: var(--c-warn-600);
  --danger: var(--c-danger-600);
  --focus: var(--c-signal-500);
  --font-sans: "Onest", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 620;
  --fw-bold: 720;
  --fw-display: 820;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 21px;
  --fs-2xl: 26px;
  --fs-3xl: 33px;
  --fs-4xl: 42px;
  --fs-5xl: 54px;
  --fs-6xl: 70px;
  --fs-display: clamp(54px, 9.4vw, 136px);
  --lh-tight: 0.94;
  --lh-snug: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.62;
  --ls-display: -0.045em;
  --ls-heading: -0.025em;
  --ls-normal: 0;
  --ls-wide: 0.01em;
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-q: 36%;
  --r-pill: 999px;
  --slit-pos: 66%;
  --slit-h: 6%;
  --shadow-none: none;
  --shadow-pop: 0 1px 0 rgba(10,10,11,.04), 0 18px 40px -12px rgba(10,10,11,.30);
  --shadow-pop-dark: 0 0 0 1px rgba(255,255,255,.06), 0 24px 48px -12px rgba(0,0,0,.7);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 420ms;
  --dur-route: 1400ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-route: cubic-bezier(.65,0,.35,1);
  --layout-container: 1240px;
  --layout-gutter: clamp(16px, 4vw, 40px);
  --layout-columns: 12;
  --layout-measure: 64ch;
  --app-rail: 208px;
  --app-titlebar: 40px;
  --shadow-current: var(--shadow-pop);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--c-ink-950);
    --bg-sunken: #060607;
    --bg-raised: var(--c-ink-900);
    --bg-inverse: var(--c-white);
    --line: var(--c-ink-800);
    --line-strong: var(--c-ink-700);
    --text: var(--c-white);
    --text-muted: var(--c-ink-300);
    --text-faint: var(--c-ink-400);
    --text-inverse: var(--c-ink-950);
    --accent: var(--c-signal-500);
    --accent-text: var(--c-signal-300);
    --on-accent: var(--c-ink-950);
    --control: var(--c-white);
    --on-control: var(--c-ink-950);
    --control-hover: var(--c-ink-100);
    --data-direct: var(--c-ink-400);
    --data-hel: var(--c-signal-500);
    --data-swe: var(--c-fjord-400);
    --ok: var(--c-ok-400);
    --warn: var(--c-warn-400);
    --danger: var(--c-danger-400);
    --focus: var(--c-signal-500);
    --shadow-current: var(--shadow-pop-dark);
  }
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] {
  --bg: var(--c-ink-950);
  --bg-sunken: #060607;
  --bg-raised: var(--c-ink-900);
  --bg-inverse: var(--c-white);
  --line: var(--c-ink-800);
  --line-strong: var(--c-ink-700);
  --text: var(--c-white);
  --text-muted: var(--c-ink-300);
  --text-faint: var(--c-ink-400);
  --text-inverse: var(--c-ink-950);
  --accent: var(--c-signal-500);
  --accent-text: var(--c-signal-300);
  --on-accent: var(--c-ink-950);
  --control: var(--c-white);
  --on-control: var(--c-ink-950);
  --control-hover: var(--c-ink-100);
  --data-direct: var(--c-ink-400);
  --data-hel: var(--c-signal-500);
  --data-swe: var(--c-fjord-400);
  --ok: var(--c-ok-400);
  --warn: var(--c-warn-400);
  --danger: var(--c-danger-400);
  --focus: var(--c-signal-500);
  --shadow-current: var(--shadow-pop-dark);
}
:root[data-theme="dark"] { color-scheme: dark; }

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