/**
 * @file
 * Токени дизайну SkloRepair.
 *
 * Знято з mobilesentrix.eu і адаптовано під фірмові кольори SkloRepair.
 * Правила застосування — у CLAUDE.md у корені проєкту.
 *
 * Нових кольорів, розмірів і радіусів поза цим файлом не заводити.
 */

:root {
  /* --- кольори --- */
  --sr-ink: #2c2c2c;
  --sr-black: #111111;
  --sr-red: #e30613;
  --sr-red-dark: #b8050f;
  --sr-grey-1: #545454;
  /* Темніший за колишній #818182 навмисно: то значення не проходило AA
     (3.89 на білому), а цей сірий використовується саме для тексту.
     #6b6b6b проходить 4.5 і на білому, і на --sr-ground. */
  --sr-grey-2: #6b6b6b;
  --sr-grey-3: #c4c4c4;
  --sr-line: #dedede;
  --sr-surface: #ffffff;
  --sr-ground: #f7f7f7;
  --sr-field: #efefef;
  --sr-in-stock: #1f7a32;
  --sr-blue: #18a6ef;
  /* Для інформаційних міток із білим текстом: --sr-blue з білим дає 2.71,
     а цей синій — понад 4.5. Декор (межі, іконки) лишається на --sr-blue. */
  --sr-blue-deep: #0d76b4;
  /* Текст на темній смузі підвалу: --sr-grey-1 там дає 2.49. */
  --sr-footer-text: #9a9a9a;
  --sr-red-deep: #c9061a;

  /* --- типографіка --- */
  --sr-font: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --sr-text-xs: 11px;
  --sr-text-sm: 13px;
  --sr-text-base: 15px;
  --sr-text-lg: 18px;
  --sr-text-xl: 24px;
  --sr-text-2xl: 34px;

  /* --- форма --- */
  --sr-radius-pill: 30px;
  --sr-radius-field: 40px;
  --sr-radius-sm: 6px;
  --sr-radius-card: 32px;
  --sr-shadow-card: 0 0 4px rgba(0, 0, 0, 0.15);
  --sr-shadow-card-hover: 0 2px 10px rgba(0, 0, 0, 0.18);
  /* Іконка кошика для прибирання позиції. Малюємо маскою, щоб колір
     брався з тла й міг мінятись при наведенні. */
  --sr-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 2h4l.5 1H14v1.5H2V3h3.5zM3.5 6h9l-.7 8.1a1 1 0 0 1-1 .9H5.2a1 1 0 0 1-1-.9zM6.5 7.5v6M9.5 7.5v6' stroke='black' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  /* Фургон доставки. Так само маскою, як і кошик вище: у смузі
     «безкоштовна доставка» він червоний, а коли поріг досягнуто —
     зелений, і перемальовувати файл заради кольору не доводиться. */
  --sr-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M1 2.5h12v9H1zM13 6h4l3 3v2.5h-7z' stroke='black' stroke-width='1.4' fill='none' stroke-linejoin='round'/%3E%3Ccircle cx='6' cy='13' r='2' stroke='black' stroke-width='1.4' fill='none'/%3E%3Ccircle cx='16' cy='13' r='2' stroke='black' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  --sr-container: 1330px;
  /* Бічний відступ усередині контейнера. Один на всі смуги — шапку,
     вміст і підвал, щоб їхні ліві краї збігалися. */
  --sr-gutter: 15px;
  --sr-control-h: 40px;
  --sr-card-w: 280px;
  --sr-gap: 16px;

  /* --- відступи, крок 4px --- */
  --sr-space-1: 4px;
  --sr-space-2: 8px;
  --sr-space-3: 12px;
  --sr-space-4: 16px;
  --sr-space-6: 24px;
  --sr-space-8: 32px;
  --sr-space-12: 48px;
}