/* Section surface tokens — desktop defaults.
   Mobile overrides live in remaining.css using the same #id selectors. */

#header {
  background: var(--rsn-white);
}

#hero {
  background: var(--rsn-navy);
}

#orientation {
  background: var(--rsn-white);
}

#systems {
  background: var(--rsn-ice);
}

#navigator {
  background: var(--rsn-navigator-bg);
}

#protective-netting {
  background: var(--rsn-protective-bg);
  color: var(--rsn-white);
}

#task-to-solution {
  background: var(--rsn-warm);
}

#advantages {
  background: var(--rsn-navy);
  color: var(--rsn-white);
}

#about {
  background: var(--rsn-about-bg);
}

#process {
  background: var(--rsn-navy);
  color: var(--rsn-white);
}

#faq {
  background: var(--rsn-warm);
}

#lead {
  background: var(--rsn-ice);
}

#contacts {
  background: var(--rsn-ice);
}

#footer {
  background: var(--rsn-footer-bg);
  color: var(--rsn-white);
}

@media (max-width: 1023px) {
  #protective-netting {
    background: var(--rsn-mobile-soft);
    color: #17202b;
  }

  #advantages {
    background: var(--rsn-white);
    color: #17202b;
  }

  #about {
    background: var(--rsn-navy);
    color: var(--rsn-white);
  }

  #faq {
    background: var(--rsn-mobile-soft);
  }

  #lead {
    background: var(--rsn-navy);
    color: var(--rsn-white);
  }

  #contacts {
    background: var(--rsn-white);
  }
}