/* Вариант 9 "Индиго": цветовые блоки, узкий гротеск в верхнем регистре.
   Механика трансформации: шторка с разделителем, два состояния в одном кадре. */
:root {
  --bg: #F4F3F0;  --surface: #E7E5E0;  --surface-2: #DDDAD4;
  --text: #101215; --muted: #5E636B;
  --accent: #0D3A5E; --accent-hover: #0A2C48; --accent-ink: #F4F3F0;
  --rule: #D5D3CD; --head-rule: #101215; --field: #FFFFFF; --danger: #C42A1C;
  --stage-bg: #EDECE8;

  --shell: 1400px; --gutter: clamp(20px, 4vw, 56px);
  --radius: 0px; --rule-w: 2px; --thumb-radius: 0px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: 'Oswald', system-ui, sans-serif;
  --font-text: 'Rubik', system-ui, sans-serif;
  --display-weight: 600; --display-tracking: -0.005em;
  --brand-weight: 600; --brand-tracking: 0.01em;
  --h1-size: clamp(2rem, 4.5vw, 4rem); --h1-weight: 600; --h1-tracking: -0.005em;
}
h1, h2, h3, .brand { text-transform: uppercase; }
/* ch считается по узкому Oswald, поэтому базовые 17ch здесь слишком тесны */
.hero h1 { max-width: 24ch; }
.cell h3, .scrolltr__step h3, .tr__caption h3, .success h3 { text-transform: uppercase; }
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121417; --surface: #1B1E22; --surface-2: #222529;
    --text: #F1F0ED; --muted: #99A0A8;
    --accent: #2E7FC4; --accent-hover: #4A97D8; --accent-ink: #06121C;
    --rule: #2C3036; --head-rule: #F1F0ED; --field: #191C20; --danger: #FF7A6B;
    --stage-bg: #1A1D21;
  }
}