:root {
  --ink: #002f2b;
  --charcoal: #0b403b;
  --paper: #fefcff;
  --ivory: #fefcff;
  --stone: #a3c9c9;
  --bronze: #4aa49b;
  --walnut: #206a64;
  --line: rgba(0, 47, 43, 0.18);
}

html,
body {
  background: var(--ink);
}

::selection {
  color: var(--ink);
  background: #00f7d4;
}

:focus-visible {
  outline-color: #00f7d4;
}

.page-loader,
.mobile-menu {
  background: var(--ink);
}

.navbar.is-scrolled {
  color: var(--ink);
  background: rgba(254, 252, 255, 0.9);
  border-bottom-color: rgba(0, 47, 43, 0.15);
}

.hero {
  background: var(--ink);
}

.hero-scrim {
  background:
    linear-gradient(90deg, rgba(0, 47, 43, 0.92), rgba(0, 47, 43, 0.58) 48%, rgba(0, 47, 43, 0.16) 76%),
    linear-gradient(0deg, rgba(0, 47, 43, 0.62), transparent 40%);
}

.hero h1 em,
h2 em {
  color: var(--bronze);
}

.button-light {
  color: var(--ink);
  background: var(--ivory);
}

.button-light:hover,
.button-ghost:hover {
  color: var(--ink);
  background: #00f7d4;
  border-color: #00f7d4;
}

.button-ghost {
  border-color: rgba(254, 252, 255, 0.72);
}

.studio,
.process {
  color: var(--ivory);
  background: var(--ink);
}

.studio-layout,
.studio-fallback {
  background: var(--charcoal);
  border-color: rgba(163, 201, 201, 0.28);
}

.studio-controls {
  background: #073a36;
  border-left-color: rgba(163, 201, 201, 0.2);
}

.chip-options button:hover,
.material-options button:hover,
.light-options button:hover,
.chip-options .is-active,
.material-options .is-active,
.light-options .is-active {
  color: var(--ink);
  background: #00f7d4;
  border-color: #00f7d4;
}

.projects,
.intro,
.before-after,
.materials-section,
.about {
  background: var(--paper);
}

.testimonials {
  color: var(--ink);
  background: var(--stone);
}

.project-image,
.featured-project,
.about-image {
  background: var(--walnut);
}

.project-image::after,
.featured-overlay {
  background: linear-gradient(180deg, transparent 32%, rgba(0, 47, 43, 0.82));
}

.services {
  background: #a3c9c9;
}

.contact {
  color: var(--ivory);
  background: var(--ink);
}

.service-list button {
  border-color: rgba(0, 47, 43, 0.25);
}

.service-list button.is-active,
.service-list button:hover {
  color: var(--ink);
  background: rgba(254, 252, 255, 0.62);
}

.contact-form .form-field select,
.contact-form .form-field select option,
.contact-form .form-field select optgroup {
  color: var(--ivory);
  background-color: var(--ink);
}

.submit-button {
  color: var(--ink);
  background: #00f7d4;
  border-color: #00f7d4;
}

.submit-button:hover {
  color: var(--ivory);
  background: var(--walnut);
  border-color: var(--walnut);
}

.footer {
  color: var(--ivory);
  background: var(--ink);
}

.footer a:hover,
.text-link:hover {
  color: #00f7d4;
}