/* tokens.css — единственный источник значений для UI QR Code Detector v1.1.
 * Линия: tools/design-line (светло + округло, один акцент, без тёмной темы).
 * Проверка: node tools/design-line/contrast-check.mjs tokens.css
 * Акцент #7a1848 унаследован от принятой v1-палитры (спека.json) — глубокий винный,
 * единственный на полке сканеров (конкуренты: синий/зелёный), контраст с белым ~10:1.
 */
:root {
  /* --- поверхность (светлая, единственная тема) --- */
  --background: #ffffff;
  --foreground: #1f2328;          /* не чистый чёрный: мягче на белом */
  --card: #f7f8fa;                /* вторичная поверхность; НЕ рамка-в-рамке */
  --card-foreground: #1f2328;
  --muted: #eef0f3;
  --muted-foreground: #59616b;

  /* --- акцент: ОДИН на экран --- */
  --primary: #7a1848;             /* винный v1; активный таб, primary-кнопка, фокус */
  --primary-foreground: #ffffff;
  --primary-muted: #f7ecf1;       /* заливка активного таба/выделения; текст на ней — --primary */
  --destructive: #b3261e;
  --destructive-foreground: #ffffff;

  /* --- границы и фокус --- */
  --border: #dde1e6;
  --ring: var(--primary);

  /* --- форма: округло по вкусу владелицы --- */
  --radius: 12px;
  --radius-sm: 8px;
  --border-width: 1px;
  --border-width-dropzone: 1.5px;

  /* --- шрифт: системный стек --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-base: 14px;
  --text-lg: 16px;

  /* --- отступы (4px сетка) --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;  --space-6: 24px;
  --dropzone-height: 168px;
  --rate-bar-min-height: 36px;
  --target-compact: 24px;

  /* --- моушен: рубрика Ковальски, гейтится аудитом --- */
  --duration-fast: 120ms;         /* hover/press */
  --duration-max: 300ms;          /* ЖЁСТКИЙ потолок всего */
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* --- цели нажатия --- */
  --target-min: 44px;             /* primary-действия; пол WCAG 24px для остальных */
  --primary-muted-dropzone: color-mix(in srgb, var(--primary-muted) 55%, transparent);
  /* Welcome page tokens */
  --surface: var(--card);
  --focus-ring: var(--ring);
  --welcome-max: 940px;
  --shot-max: 760px;
  --welcome-padding-min: 20px;
  --welcome-padding-fluid: 3vw;
  --welcome-padding-max: 36px;
  --step-min-height: 100svh;
  --welcome-title-size: clamp(24px, 3vw, 37px);
  --welcome-title-weight: 700;
  --welcome-title-tracking: -0.01em;
  --welcome-title-line-height: 1.2;
  --welcome-body-size: 17px;
  --welcome-body-small-size: 16px;
  --welcome-line-height: 1.5;
  --welcome-tight-line-height: 1;
  --step-number-size: 22px;
  --step-number-border: 1.5px;
  --step-number-font-size: 13px;
  --step-number-weight: 400;
  --step-number-gap: 3px;
  --welcome-ink: #111111;
  --welcome-white: #ffffff;
  --welcome-party-size: clamp(28px, 4vw, 40px);
  --welcome-press-scale: 0.94;
  --welcome-placeholder-height: 220px;
  --welcome-placeholder-label-size: 14px;
  --welcome-mobile-title-size: clamp(20px, 5.6vw, 24px);
  --welcome-shadow: 0 8px 26px rgba(31, 35, 40, 0.1);
  --popup-shell-max: 420px;
}

/* @pair --foreground on --background */
/* @pair --card-foreground on --card */
/* @pair --muted-foreground on --background */
/* @pair --primary-foreground on --primary */
/* @pair --destructive-foreground on --destructive */
/* @pair --primary on --primary-muted */
/* @pair --primary on --background */

/* Used only when the product tokens.css has no prefers-color-scheme block. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #14171b;
    --foreground: #e6e9ee;
    --card: #1c2027;
    --card-foreground: #e6e9ee;
    --muted: #262b33;
    --muted-foreground: #9aa3ae;
    --border: #333a44;
    --primary-foreground: #0a1b33;
  }
}