/* ParetoPoint production theme: warm surfaces and Amber/Copper accents.
   Load after styles.css on all public pages. */
:root {
  --warm-page: #F7F4EF;
  --warm-surface: #FFFFFF;
  --warm-ink: #243247;
  --warm-muted: #536071;
  --warm-line: #E6DFD5;
  --warm-accent: #A6533D;
  --color-slate-text: var(--warm-ink);
}

body,
.services,
.about,
.contact {
  background: var(--warm-page);
  color: var(--warm-ink);
}

/* Keep the photographic hero dark; use a quiet navy frame. */
.nav {
  background: rgba(36, 50, 71, 0.94);
  border-bottom-color: rgba(230, 223, 213, 0.15);
}

.footer {
  background: var(--warm-ink);
  border-top-color: rgba(230, 223, 213, 0.2);
}

.brand-strong {
  color: #E7B8A6;
}

.text-gradient {
  background: none;
  color: var(--warm-accent);
  -webkit-text-fill-color: currentColor;
}

.hero .text-gradient {
  color: #E7B8A6;
}

.nav-cta,
.btn-primary,
.btn-submit,
.indicator.active {
  background: var(--warm-accent);
}

.nav-cta:hover,
.btn-primary:hover,
.btn-submit:hover {
  background: #8E4432;
  box-shadow: 0 12px 28px rgba(166, 83, 61, 0.2);
}

/* Remove colored glows and grids without changing section geometry. */
.services-bg,
.about-bg,
.contact-bg,
.about-glow-left,
.about-glow-right,
.features-glow-top,
.features-glow-bottom,
.contact-glow,
.service-image::before,
.service-content::before {
  background: none;
}

.section-title,
.about-title,
.about-text-bold,
.service-tagline,
.feature-title,
.about-profile-name,
.form-label {
  color: var(--warm-ink);
}

.service-text,
.about-text,
.about-text-emphasis,
.feature-desc,
.about-profile-role,
.section-subtitle {
  color: var(--warm-muted);
}

.service-content,
.features-card,
.about-profile,
.contact-form-container {
  background: var(--warm-surface);
  border-color: var(--warm-line);
  box-shadow: 0 16px 40px rgba(66, 53, 39, 0.08);
}

.service-image {
  border-color: var(--warm-line);
}

.feature-tag,
.about-badge,
.contact-badge {
  background: #EFE8DF;
  border-color: var(--warm-line);
  color: var(--warm-ink);
}

.feature-tag:hover {
  background: #E6DFD5;
}

.about-badge span,
.contact-badge span,
.about-badge-icon,
.contact-badge-icon {
  color: var(--warm-accent);
}

.gradient-indigo,
.gradient-purple,
.gradient-cyan {
  background: #F3E7E0;
}

.feature-icon svg {
  color: var(--warm-accent);
}

.about-profile-img,
.about-profile:hover .about-profile-img {
  box-shadow: 0 0 0 3px var(--warm-line), 0 8px 20px rgba(66, 53, 39, 0.12);
}

.form-input,
.form-textarea {
  background: #FDFBF8;
  color: var(--warm-ink);
  border-color: var(--warm-line);
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--warm-accent);
  box-shadow: 0 0 0 3px rgba(166, 83, 61, 0.16);
}

.form-error {
  color: #AD342C;
}

.footer-link,
.footer-copyright {
  color: #CFD4DC;
}

.footer-link:hover {
  color: white;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid #D18B6D;
  outline-offset: 4px;
}

/* Amber accents and photographic overlays. */
:root {
  --amber: #E9A854;
  --copper: #D2703F;
  --headline-gold: #F6C56A;
  --charcoal: #1A1614;
  --warm-ink: #322D29;
  --warm-muted: #655C55;
  --warm-accent: var(--amber);
}

.hero-overlay {
  background: linear-gradient(to right, rgba(26, 22, 20, 0.82), rgba(26, 22, 20, 0.5), rgba(26, 22, 20, 0.12));
}

/* Charcoal transition at the bottom with a subtle tint at the top. */
.hero-overlay-gradient {
  background: linear-gradient(to top, #1A1614 0%, transparent 45%, rgba(26, 22, 20, 0.2));
}

.nav {
  background: rgba(26, 22, 20, 0.94);
}

.footer {
  background: var(--charcoal);
}

.brand-strong {
  color: var(--amber);
}

.text-gradient,
.hero .text-gradient {
  color: var(--amber);
  background: linear-gradient(135deg, var(--headline-gold) 0%, var(--amber) 50%, var(--copper) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-cta,
.btn-primary,
.btn-submit,
.indicator.active,
.nav-cta:hover,
.btn-primary:hover,
.btn-submit:hover {
  background: linear-gradient(to right, var(--amber), var(--copper));
  color: var(--charcoal);
}

.nav-cta:hover,
.btn-primary:hover,
.btn-submit:hover {
  box-shadow: 0 12px 28px rgba(210, 112, 63, 0.24);
}

.hero-subtitle,
.footer-link,
.footer-copyright {
  color: #DDD5CD;
}

.service-image-overlay {
  background:
    linear-gradient(to bottom, rgba(26, 22, 20, 0.7), transparent 50%),
    linear-gradient(to top, rgba(210, 112, 63, 0.3), transparent 65%);
}

.service-image {
  border-color: rgba(233, 168, 84, 0.3);
}

.gradient-indigo,
.gradient-purple,
.gradient-cyan {
  background: var(--charcoal);
}

.feature-icon svg,
.about-badge-icon,
.contact-badge-icon {
  color: var(--amber);
}

.about-badge span,
.contact-badge span {
  color: var(--warm-ink);
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(210, 112, 63, 0.2);
}

a:focus-visible,
button:focus-visible {
  outline-color: var(--copper);
}

/* Shared legal-page styling for /imprint.html and /imprint/. */
.imprint-body {
  background: var(--warm-page);
  color: var(--warm-ink);
}

.imprint-nav {
  border-bottom-color: rgba(233, 168, 84, 0.2);
}

.imprint-back {
  color: var(--amber);
}

.imprint-back:hover {
  color: white;
}

.imprint-title,
.imprint-section-subtitle,
.imprint-strong,
.imprint-strong-light {
  color: var(--warm-ink);
}

.imprint-section-title,
.imprint-link {
  /* Deeper copper keeps smaller text readable on the light background. */
  color: #9B4B27;
}

.imprint-link {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--copper);
}

.imprint-link:hover {
  color: var(--warm-ink);
}

.imprint-text,
.imprint-list,
.imprint-subtitle,
.imprint-legal {
  color: var(--warm-muted);
}

.imprint-divider {
  border-top-color: var(--warm-line);
}