/* RepairMyApple — токены и компоненты для сайта цен.
   Источник: дизайн-система RepairMyApple (claude.ai/artifact/XbwkgNQRE3qyruTrmW6WAn), tokens.json и components/bundle.css.
   Система однотемная (светлая): тёмной темы нет, поэтому её нет и здесь. */

:root {
  /* Цвет */
  --brand: #9e35c9;          /* единственный акцент: действие и внимание */
  --brand-hover: #8e28b8;
  --brand-tint: #e2c6f2;
  --ink: #0c0c13;            /* основной текст, 18:1 на surface-100 */
  --ink-heading: #000000;
  --ink-secondary: #3d3d3d;  /* второстепенный текст, 10.9:1 */
  --muted: #8d8da0;          /* 3.3:1 — только вспомогательное, не для важного */
  --text-disabled: #bdbdcd;
  --navy: #2c2d4c;
  --surface: #ffffff;
  --surface-100: #f7f8f9;
  --surface-200: #eef1f4;
  --border: rgba(0, 0, 0, 0.09);
  --border-navy: rgba(44, 45, 76, 0.1);
  --price-sale: #e63333;
  --error-alt: #ff5372;
  --success: #3abc6e;        /* только точки/иконки, 2.4:1 */
  --success-tint: #ccebd9;
  --info: #0288d1;
  --warning: #e67e22;
  --warning-tint: #fff5e4;

  /* Шрифт: Graphik LCG — коммерческий, файлов нет; до лицензии работает Inter */
  --font-sans: GraphikLCG, "Graphik LCG", Inter, system-ui, -apple-system, sans-serif;

  /* Отступы */
  --space-4: 4px; --space-8: 8px; --space-10: 10px; --space-18: 18px;
  --space-20: 20px; --space-22: 22px; --space-26: 26px; --space-30: 30px;

  /* Радиусы */
  --radius-6: 6px; --radius-10: 10px; --radius-16: 16px; --radius-22: 22px;
  --radius-26: 26px; --radius-32: 32px; --radius-pill: 100px; --radius-round: 50%;

  /* Тени — почти не используются */
  --shadow-card: 0 4px 16px 0 rgba(0, 0, 0, 0.1);

  --container-max: 1480px;
  color-scheme: light;
}

html, body { background: var(--surface-100); }
body { margin: 0; font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* Знак: логотипа в системе пока нет — название набирается шрифтом 500 в brand */
.rma-wordmark { font: 500 15px/1 var(--font-sans); color: var(--brand); letter-spacing: -0.01em; }

/* Кнопки (компактная высота ~40px для панели инструментов; полная — .rma-btn--lg) */
.rma-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-10); border: 0; cursor: pointer;
  font: 500 14px/16px var(--font-sans); padding: 12px var(--space-18); border-radius: var(--radius-16);
  transition: background-color .15s ease; text-decoration: none; white-space: nowrap; }
.rma-btn--lg { font-size: 16px; padding: var(--space-18) var(--space-26); }
.rma-btn--primary { background: var(--brand); color: var(--surface); }
.rma-btn--primary:hover { background: var(--brand-hover); }
.rma-btn--secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--border-navy); font-weight: 400; }
.rma-btn--secondary:hover { background: var(--surface-100); }
.rma-btn--tertiary { background: var(--surface-200); color: var(--ink); }
.rma-btn--tertiary:hover { background: #e4e8ec; }
.rma-btn:disabled { background: var(--surface-200); color: var(--text-disabled); cursor: default; }
.rma-btn:focus-visible, .rma-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.rma-link { border: 0; background: none; padding: 0; color: var(--brand); font: 500 13px/15.6px var(--font-sans); cursor: pointer; text-decoration: none; }
.rma-link:hover { color: var(--brand-hover); }

/* Чипы и счётчики */
.rma-chip { display: inline-block; padding: var(--space-4) var(--space-8); border-radius: var(--radius-6); background: var(--surface-100);
  color: var(--ink-secondary); font: 500 12px/14px var(--font-sans); }
.rma-chip--active { background: var(--ink); color: var(--surface); }
.rma-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; box-sizing: border-box;
  padding: 0 var(--space-8); border-radius: var(--radius-pill); background: var(--ink); color: var(--surface); font: 600 12px/12px var(--font-sans); }
.rma-count--brand { background: var(--brand); }

/* Поля ввода (состояния в системе не сняты — собраны из border/brand/radius-10) */
.rma-input { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-10); background: var(--surface);
  color: var(--ink); font: 400 14px/18px var(--font-sans); }
.rma-input::placeholder { color: var(--muted); }
.rma-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }