/* SellerML — единственная живая тема лендинга, палитра бренд-кита (карта 276).
   Имя `mercado` осталось от пробы двух визуальных языков (второй, `nubank.css`,
   ни к одной кнопке не подключён и в разметку не входит). Переименование ждёт
   ответа founder по переключателю тем — см. proposal.md карты 276.
   Значения обязаны совпадать с блоком-подстраховкой в `css/base.css`
   (включая затемнение переднего плана под WCAG AA — см. там же). */
html[data-theme="mercado"] {
  --color-brand: #10714E;
  --color-brand-dark: #0A5038;
  --color-brand-press: #0A5038;
  --color-brand-accent: #0E1726;
  --color-logo: #15181F;
  --color-logo-dark: #0E1726;
  --color-brand-muted: rgba(21, 148, 104, 0.1);
  --color-brand-muted-border: rgba(21, 148, 104, 0.24);
  --color-profit: #10714E;
  --color-loss: #C23A3F;
  --color-ink: #15181F;
  --color-ink-secondary: #2A3038;
  --color-muted: #5C6A7E;
  --color-surface: #fff;
  --color-surface-alt: #F5F7FA;
  --color-surface-warm: #EEF1F5;
  --color-surface-card: #fff;
  --color-border: #E3E7EC;
  --color-hero-glow: rgba(21, 148, 104, 0.12);
  --color-card: #fff;
  --color-fee-ml: #3E5C76;
  --color-fee-mp: #0E7C86;
  --color-fee-ship: #E08A0B;
  --color-fee-gap: #E5484D;
  --font-sans: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-display: "Inter", system-ui, sans-serif;
  --radius-card: 12px;
  --radius-btn: 9999px;
  --radius-input: 8px;
  --shadow-card: rgba(0, 55, 112, 0.08) 0 1px 3px;
  --shadow-elevated: rgba(0, 55, 112, 0.08) 0 8px 24px, rgba(0, 55, 112, 0.04) 0 2px 6px;
  --shadow-form: rgba(0, 55, 112, 0.1) 0 12px 40px, rgba(0, 55, 112, 0.06) 0 4px 12px;
}

html[data-theme="mercado"] body {
  background: var(--color-surface);
  color: var(--color-ink);
}

html[data-theme="mercado"] .site-header {
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

html[data-theme="mercado"] .logo-mark {
  background: var(--color-brand);
  border-radius: 10px;
}

html[data-theme="mercado"] .brand-mark {
  color: var(--color-logo);
}

html[data-theme="mercado"] .btn-primary {
  background: var(--color-brand);
  border-radius: var(--radius-btn);
  font-weight: 600;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-brand) 35%, transparent);
}

html[data-theme="mercado"] .btn-primary:hover:not(:disabled) {
  background: var(--color-brand-press);
}

html[data-theme="mercado"] .hero-section {
  background: linear-gradient(180deg, #F5F7FA 0%, #fff 55%);
}

html[data-theme="mercado"] .theme-badge {
  background: linear-gradient(135deg, rgba(21, 148, 104, 0.1), rgba(255, 255, 255, 0.92));
  border: 1px solid color-mix(in srgb, var(--color-brand) 30%, transparent);
  color: var(--color-brand-dark);
  box-shadow: var(--shadow-card);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.65rem;
}

html[data-theme="mercado"] h1 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--color-ink);
}

html[data-theme="mercado"] h2 {
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}

/* Столкновение в каскаде, из-за которого заголовок последнего призыва был
   тёмным по тёмному. В `css/base.css` есть `.theme-cta-band h2 { color: #fff }`,
   но правило выше (`html[data-theme="mercado"] h2`) весит больше — атрибут плюс
   два элемента против одного класса и элемента — и красит заголовок чернилами.
   Подзаголовок и кнопка при этом оставались белыми, поэтому секция выглядела
   как «без заголовка», а не как поломка, и пережила все проверки: текст в
   разметке есть, контраст никто не мерил.

   Чиним тем же весом, что у виновника: тематическое правило для тёмной полосы. */
html[data-theme="mercado"] .theme-cta-band h1,
html[data-theme="mercado"] .theme-cta-band h2,
html[data-theme="mercado"] .theme-cta-band h3 {
  color: #fff;
}

html[data-theme="mercado"] .section-alt {
  background: var(--color-surface-alt);
}

html[data-theme="mercado"] .theme-cta-band {
  background: linear-gradient(135deg, #0E1726 0%, #15202E 52%, #0B1420 100%);
}

html[data-theme="mercado"] .dash-chrome {
  background: var(--color-surface-warm);
  border-color: var(--color-border);
}

html[data-theme="mercado"] .dashboard-shell {
  box-shadow: var(--shadow-elevated);
  border-color: var(--color-border);
  border-radius: 16px;
}