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

  /* --- акцент: ОДИН на экран --- */
  --primary: #0f766e;             /* product.config.mjs accent */
  --primary-foreground: #ffffff;
  --primary-muted: #e3f3f0;       /* заливка выделения; текст на ней — --primary */
  --accent: #0f766e;              /* sampled from public/icon/icon-128.png: ACTION level (owner 10.09) */
  --accent-muted: #e3f3f0;        /* teal tint for the active control (same family as --primary-muted) */
  --destructive: #b3261e;
  --destructive-foreground: #ffffff;

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

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

  /* --- шрифт --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-sm: 13px;
  --text-base: 13px;
  --text-lg: 17px;
  --text-xl: 21px;
  /* Число — главный объект этого продукта, поэтому у него свой размер и своя ширина цифр. */
  --text-number: 21px;
  --tracking-number: 0.04em;

  /* --- отступы (4px сетка) --- */
  --space-1: 5px;  --space-2: 8px;  --space-3: 13px;  --space-4: 13px;  --space-6: 21px;  --space-8: 34px;

  /* --- поверхность попапа --- */
  --surface-width: 360px;         /* высота НЕ фиксируется: следует состоянию (правило 30.08 №3) */
  --void-max: 21px;               /* порог остатка пустоты снизу/по бокам для compact-check */
  --list-max-height: 296px;       /* единственный контейнер с внутренней прокруткой */
  --content-max: 960px;           /* ширина полосы контента в рабочей вкладке */
  --row-min-height: 55px;         /* строка реестра */
  --dropstrip-height: 70px;       /* полоса приёма, когда файлы уже есть */
  --glyph-width: 27px;  --glyph-height: 34px;  --glyph-fold: 8px;
  --bar-height: 6px;              /* дорожка прогресса */
  --mark: 21px;                   /* фирменный знак в топбаре */
  --dot: 8px;                     /* зелёный маркер готового файла */
  --field-range: 233px;  --field-range-min: 113px;  --field-num: 89px;
  --breakpoint-narrow: 1100px;    /* единственный брейкпоинт: полноэкранная вкладка */
  --shadow: 0 4px 14px rgba(31, 35, 40, 0.08), 0 1px 2px rgba(31, 35, 40, 0.06);

  /* --- состояние пустого ввода (референс: дроп-зона донора QR) --- */
  --dropzone-height: 144px;
  --border-width-dropzone: 1.5px;
  --primary-muted-dropzone: color-mix(in srgb, var(--primary-muted) 55%, transparent);

  /* --- моушен: попап не анимируется при открытии (daily+) --- */
  --duration-fast: 120ms;
  --duration-max: 300ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* --- цели нажатия --- */
  --target-min: 43px;             /* primary-действия; пол WCAG 24px для остальных */
  --target-compact: 34px;

  /* --- v1.1 three levels (owner 10.09) --- */
  --preview-share: 40%;
  --preview-min: 296px;
  --preview-stage-max: 479px;
  --card-min: 233px;
  --work-ink: #1f2328;            /* work level: black ink */
  --radius-xs: 5px;
  --row-selected: color-mix(in srgb, var(--accent-muted) 70%, var(--background));

  /* --- размеры контролов и глифов (компонентный CSS не держит сырых px) --- */
  --control: 34px;                /* иконка-источник, Copy в строке результата */
  --btn-height: 34px;             /* обычная кнопка состояния */
  --icon: 17px;                   /* глиф в строке источников */
  --icon-sm: 17px;                /* глиф Copy */
  --meta-gap: 3px;
}

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

/* One frame at a time (owner rule 10.09): every focusable control draws its ring ON the border,
   never outside it; nothing falls back to the browser ring. Product rules may override. */
:where(input, select, textarea, button, [tabindex]):focus-visible {
  outline: var(--outline-width, 2px) solid var(--ring, currentColor);
  outline-offset: calc(-1 * var(--border-width, 1px));
}

:where(input, select, textarea)[aria-invalid='true']:focus-visible {
  outline-color: var(--destructive, currentColor);
}

/* Case light edition. All values used by the final workspace live here. */
:root {
  --background: #f6f8f1;
  --foreground: #203b32;
  --card: #ffffff;
  --card-foreground: #203b32;
  --muted: #e8eee3;
  --muted-foreground: #587064;
  --primary: #0f766e;
  --primary-foreground: #ffffff;
  --primary-muted: #e0efe2;
  --border: #ccd9cb;
  --plate: #edf3e7;
  --case-yellow: #eee6a4;
  --case-ink: #355647;
  --error-wash: #fcf1e8;
  --error-ink: #8c462b;
  --selected: #edf5e9;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --radius: 13px;
  --radius-sm: 8px;
  --radius-xs: 5px;
  --radius-pill: 99px;
  --hair: 1px;
  --outline-width: 2px;
  --space-half: 3px;
  --space-5: 21px;
  --space-10: 34px;
  --text-xs: 10px;
  --text-num: 13px;
  --text-title: 21px;
  --text-hero: 27px;
  --text-target: 34px;
  --tracking-label: .10em;
  --top-height: 70px;
  --foot-height: 70px;
  --settings-width: 296px;
  --preview-min-height: 233px;
  --stage-head-height: 34px;
  --preview-max-height: 377px;
  --ledger-height: 183px;
  --col-size: 70px;
  --col-pct: 55px;
  --col-state: 89px;
  --row-height: 55px;
  --head-row: 28px;
  --chip-height: 34px;
  --brand-size: 43px;
  --hero-portrait: 113px;
  --hero-empty-max: 690px;
  --hero-empty-label-top: 21px;
  --empty-button-bottom: 13px;
  --num-width: 144px;
  --range-height: 27px;
  --handle: 43px;
  --seam-width: 2px;
  --tag-bg: #ffffffeb;
  --checker: #dde8d680;
  --focus-shadow: 0 0 0 0 transparent;
  --shadow: 0 8px 30px -18px #32513d40;
  --dialog-inset: 21px;
  --dialog-shadow: 0 0 0 100vmax #17291fea;
  --case-motion: 900ms;
  --case-bob: -3px;
  --progress-min: 70px;
  --history-max: 233px;
  --phi-3: 3px;
  --phi-5: 5px;
  --phi-8: 8px;
  --phi-10: 10px;
  --phi-13: 13px;
  --phi-17: 17px;
  --phi-21: 21px;
  --phi-27: 27px;
  --phi-34: 34px;
  --phi-43: 43px;
  --phi-55: 55px;
  --phi-70: 70px;
  --phi-89: 89px;
  --phi-233: 233px;
}

:root { --col-size-medium: 70px; --col-pct-medium: 43px; --col-state-medium: 70px; --col-size-small: 55px; --col-pct-small: 34px; --col-state-small: 55px; }

/* 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;
  }
}