/* MerchantRevive shared design contract.
   P01 (index.html) is the approved visual parent for every Russian master page. */
:root {
  --mr-font-body: "Stolzl Text", Arial, sans-serif;
  --mr-font-heading: "Stolzl Text", Arial, sans-serif;

  --mr-color-ink: #1f1f1f;
  --mr-color-copy: #696969;
  --mr-color-muted: #969696;
  --mr-color-paper: #ffffff;
  --mr-color-surface: #fafafa;
  --mr-color-line: #e2e2e2;
  --mr-color-primary: #2562f4;
  --mr-color-primary-hover: #1955e0;
  --mr-color-primary-soft: #eef3ff;
  --mr-color-success: #35b34a;
  --mr-color-success-soft: #edf9ef;
  --mr-color-danger: #cf4528;

  --mr-content-max: 1240px;
  --mr-content-gutter: 48px;
  --mr-shell-gutter: 24px;
  --mr-section-space: 192px;
  --mr-grid-gap: 64px;

  --mr-radius-control: 999px;
  --mr-radius-card: 16px;
  --mr-radius-panel: 22px;
  --mr-shadow-card: 0 16px 48px rgba(28, 35, 68, 0.08);
  --mr-shadow-panel: 0 24px 70px rgba(35, 45, 85, 0.11);

  --mr-weight-body: 400;
  --mr-weight-display: 450;
  --mr-weight-ui: 500;
  --mr-weight-emphasis: 700;
  --mr-display-size: 60px;
  --mr-title-size: 44px;
  --mr-heading-size: 24px;
  --mr-body-size: 18px;
  --mr-small-size: 13px;

  --mr-motion-fast: 180ms;
  --mr-motion-normal: 300ms;
}

html { scroll-behavior: smooth; }

body[data-style-source="P01"] {
  min-width: 320px;
  color: var(--mr-color-ink);
  background: var(--mr-color-paper);
  font-family: var(--mr-font-body);
  font-weight: var(--mr-weight-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body[data-style-source="P01"] :is(button, input, textarea, select) {
  font-family: inherit;
}

.mr-content-container {
  box-sizing: border-box;
  width: min(var(--mr-content-max), calc(100% - (var(--mr-content-gutter) * 2)));
  margin-inline: auto;
}

.mr-section { padding-block: calc(var(--mr-section-space) / 2); }
.mr-section--muted { background: var(--mr-color-surface); }
.mr-section--dark { color: #fff; background: #111; }

.mr-eyebrow {
  margin: 0 0 14px;
  color: var(--mr-color-ink);
  font-size: var(--mr-small-size);
  font-weight: var(--mr-weight-ui);
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mr-display,
.mr-section-title {
  margin: 0;
  color: var(--mr-color-ink);
  font-family: var(--mr-font-heading);
  font-weight: var(--mr-weight-display);
  text-wrap: balance;
}

.mr-display {
  font-size: var(--mr-display-size);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.mr-section-title {
  font-size: var(--mr-title-size);
  line-height: 1.18;
  letter-spacing: -0.018em;
}

.mr-lead,
.mr-copy {
  margin: 0;
  color: var(--mr-color-copy);
  font-family: var(--mr-font-body);
  font-weight: var(--mr-weight-body);
}

.mr-lead { font-size: var(--mr-body-size); line-height: 1.55; }
.mr-copy { font-size: 16px; line-height: 1.6; }

.mr-button {
  box-sizing: border-box;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border: 1px solid var(--mr-color-ink);
  border-radius: var(--mr-radius-control);
  color: var(--mr-color-ink);
  background: transparent;
  text-decoration: none;
  font-size: 15px;
  font-weight: var(--mr-weight-ui);
  line-height: 1.3;
  text-align: center;
  transition: color var(--mr-motion-fast), background var(--mr-motion-fast), border-color var(--mr-motion-fast), transform var(--mr-motion-fast);
}

.mr-button:hover { transform: translateY(-1px); }
.mr-button--primary { color: #fff !important; background: var(--mr-color-primary); border-color: var(--mr-color-primary); }
.mr-button--primary:hover { background: var(--mr-color-primary-hover); border-color: var(--mr-color-primary-hover); }
.mr-button--secondary:hover { color: #fff; background: var(--mr-color-ink); }

.mr-card {
  box-sizing: border-box;
  background: var(--mr-color-paper);
  border: 1px solid var(--mr-color-line);
  border-radius: var(--mr-radius-card);
  box-shadow: var(--mr-shadow-card);
}

body[data-style-source="P01"] :is(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--mr-color-primary);
  outline-offset: 4px;
}

@media (max-width: 1279px) {
  :root { --mr-section-space: 160px; --mr-display-size: 52px; --mr-title-size: 42px; }
}

@media (max-width: 1023px) {
  :root {
    --mr-content-gutter: 28px;
    --mr-section-space: 128px;
    --mr-grid-gap: 40px;
    --mr-display-size: 42px;
    --mr-title-size: 36px;
  }
}

@media (max-width: 767px) {
  :root {
    --mr-content-gutter: 16px;
    --mr-section-space: 104px;
    --mr-grid-gap: 28px;
    --mr-display-size: 32px;
    --mr-title-size: 28px;
    --mr-body-size: 16px;
  }
  .mr-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
