/* ext-bridge — дизайн-токены.
   Источник: https://claude.ai/artifact/Ka6GmpDzfSw4biXdnxEtNo
   Шрифты (Google Fonts, оба с кириллицей):
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap">
   В расширении (MV3, без внешних запросов) положить woff2 локально. */

:root {
  /* шрифты */
  --font-ui: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* шкала текста: размер / высота строки / насыщенность */
  --fs-price: 44px;  /* 1.0, 600, letter-spacing -0.03em */
  --fs-h1: 28px;     /* 1.2, 600, -0.02em */
  --fs-h2: 18px;     /* 600 */
  --fs-author: 20px; /* 600, -0.01em */
  --fs-body: 15px;   /* 1.5, 400 — страница оплаты */
  --fs-body-sm: 14px;/* админка, popup */
  --fs-caption: 13px;
  --fs-micro: 12px;  /* подписи в popup, заголовки колонок (uppercase, 600, +0.04em) */
  --lh-body: 1.5;

  /* отступы */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* радиусы */
  --r-sm: 8px;   /* мелкие кнопки, инпуты админки */
  --r-md: 10px;  /* кнопки, инпуты, иконки-плашки */
  --r-lg: 12px;  /* кнопки способов оплаты, блоки статуса */
  --r-xl: 16px;  /* карточки */
  --r-pill: 999px;

  /* размеры */
  --h-btn: 48px;       /* страница оплаты */
  --h-btn-popup: 44px;
  --h-btn-admin: 40px;
  --h-pay-method: 64px;
  --w-popup: 320px;
  --w-container-pay: 1040px;
  --w-container-admin: 1120px;
  --pad-card: 32px;    /* карточка оплаты; визитка 28px; админка 24px; popup 16px */

  color-scheme: dark;
  --bg: #0F0F11; --surface: #18181B; --surface-2: #212125;
  --border: #2A2A2F; --border-strong: #3D3D44;
  --text: #EDEDEF; --muted: #A1A1AA;
  --accent: #7D9BFF; --on-accent: #0E1220; --accent-soft: #1D2542;
  --ok: #4CC38A; --ok-soft: #14281E;
  --warn: #F0915F; --warn-soft: #2E1D15;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F6F3; --surface: #FFFFFF; --surface-2: #F0F0EC;
  --border: #E3E3DE; --border-strong: #CBCBC4;
  --text: #18181B; --muted: #5E5E66;
  --accent: #2F55D4; --on-accent: #FFFFFF; --accent-soft: #EAEFFC;
  --ok: #1E7A4C; --ok-soft: #E4F2EA;
  --warn: #B4461A; --warn-soft: #FBECE4;
}

body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-body)/var(--lh-body) var(--font-ui); }