:root {
  --soft-white: #fffdfd;
  --soft-blue: #edf6fa;
  --soft-pink: #fff1f6;
  --soft-blue-deep: #e2eff5;
  --soft-pink-deep: #f6e5ec;
  --ink: #1d3a4d;
  --blue: #4d7898;
  --sky: #edf6fa;
  --aqua: #e1f3f2;
  --orange: #c9849c;
  --cream: #fff6f8;
  --line: #d8e7ed;
  --muted: #617784;
}

body {
  background: var(--soft-white);
}

.topbar {
  background: var(--soft-white);
  color: #34586d;
}

.topbar a {
  color: var(--ink);
}

.header {
  background: #ffffffeb;
}

.button-dark {
  background: #385f78;
}

.button-accent {
  background: var(--orange);
}

.button-outline {
  border-color: var(--blue);
  color: var(--ink);
}

.hero {
  background: var(--soft-white);
}

/* Seções em sequência: branco suave, azul suave, rosa suave. */
.credentials-banner {
  background: var(--soft-blue);
}

.services {
  background: var(--soft-pink);
}

.service-tag {
  background: #385f78;
  color: #eef8fa;
}

.service-icon {
  color: var(--orange);
}

.about {
  background: var(--soft-white);
}

.about-visual {
  background: #8eb8cb;
}

.portfolio {
  background: var(--soft-blue);
  color: var(--ink);
}

.portfolio .eyebrow {
  color: var(--blue);
}

.portfolio .button-outline {
  border-color: var(--blue);
  color: var(--ink);
}

.project:before {
  background: linear-gradient(0deg, #fffdfdcc, transparent);
}

.project span {
  color: #385f78;
}

.project-details-button {
  color: var(--ink);
}

.p1 {
  background: linear-gradient(130deg, #91bdce, #d9edf1);
}

.p2 {
  background: linear-gradient(130deg, #a9c5cf, #e8dfe8);
}

.p3 {
  background: linear-gradient(130deg, #d9a4b8, #f5dce5);
}

.shop {
  background: var(--soft-pink);
}

.pmoc {
  background: var(--soft-white);
}

.credentials-banner {
  background: var(--soft-blue);
  color: var(--ink);
}

.credentials-banner .eyebrow,
.credentials-banner h2 {
  color: var(--ink);
}

.contact {
  background: var(--soft-blue);
}

footer {
  background: var(--soft-pink);
  color: #456577;
}

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

.footer-social a {
  color: var(--blue);
}

.footer-social a:hover {
  color: var(--ink);
}