/* 10 harmonious themes — 5 light + 5 dark. Applied via html[data-theme="..."] */

/* ---- LIGHT ---- */
html[data-theme="gold-light"],
html:not([data-theme]) {
  --ink: #0b0d10;
  --ink-2: #171b22;
  --muted: #6b7280;
  --line: rgba(11, 13, 16, 0.1);
  --sand: #f6f3ee;
  --sand-2: #ebe6dc;
  --paper: #ffffff;
  --gold: #d4a017;
  --gold-2: #f0c55a;
  --gold-3: #a67c0a;
  --accent: #2f5d50;
  --header-bg: rgba(255, 255, 255, 0.92);
  --card-bg: #ffffff;
  --footer-bg: #090b0e;
  --footer-text: rgba(255, 255, 255, 0.78);
  --hero-overlay: linear-gradient(180deg, rgba(8,10,14,0.45) 0%, rgba(8,10,14,0.62) 48%, rgba(8,10,14,0.82) 100%);
  --section-dark-bg: linear-gradient(160deg, #0d1117 0%, #151b24 55%, #0b0d10 100%);
  --title-grad: linear-gradient(135deg, #0b0d10 20%, #a67c0a 55%, #0b0d10 90%);
  --title-grad-dark: linear-gradient(135deg, #fff 10%, #f0c55a 50%, #fff 90%);
}

html[data-theme="sand-light"] {
  --ink: #1a1510;
  --ink-2: #2a241c;
  --muted: #7a6f63;
  --line: rgba(26, 21, 16, 0.1);
  --sand: #faf6f0;
  --sand-2: #f0e8dc;
  --paper: #fffdf9;
  --gold: #c4922e;
  --gold-2: #e8b85a;
  --gold-3: #9a7020;
  --accent: #5c6b4a;
  --header-bg: rgba(255, 253, 249, 0.94);
  --card-bg: #ffffff;
  --footer-bg: #1a1510;
  --footer-text: rgba(255, 245, 230, 0.8);
  --hero-overlay: linear-gradient(180deg, rgba(26,21,16,0.5), rgba(26,21,16,0.78));
  --section-dark-bg: linear-gradient(160deg, #1a1510, #2a241c);
  --title-grad: linear-gradient(135deg, #1a1510 20%, #c4922e 55%, #1a1510 90%);
  --title-grad-dark: linear-gradient(135deg, #fff8ee 10%, #e8b85a 50%, #fff8ee 90%);
}

html[data-theme="slate-light"] {
  --ink: #12161c;
  --ink-2: #1e2630;
  --muted: #66707d;
  --line: rgba(18, 22, 28, 0.1);
  --sand: #f3f5f7;
  --sand-2: #e6eaef;
  --paper: #ffffff;
  --gold: #3d7ea6;
  --gold-2: #6aa8c9;
  --gold-3: #2a5f80;
  --accent: #4a6670;
  --header-bg: rgba(255, 255, 255, 0.94);
  --card-bg: #ffffff;
  --footer-bg: #12161c;
  --footer-text: rgba(230, 236, 242, 0.8);
  --hero-overlay: linear-gradient(180deg, rgba(18,22,28,0.5), rgba(18,22,28,0.8));
  --section-dark-bg: linear-gradient(160deg, #12161c, #1e2630);
  --title-grad: linear-gradient(135deg, #12161c 20%, #3d7ea6 55%, #12161c 90%);
  --title-grad-dark: linear-gradient(135deg, #fff 10%, #6aa8c9 50%, #fff 90%);
}

html[data-theme="forest-light"] {
  --ink: #122018;
  --ink-2: #1c2e24;
  --muted: #66786c;
  --line: rgba(18, 32, 24, 0.1);
  --sand: #f3f6f3;
  --sand-2: #e5ece6;
  --paper: #ffffff;
  --gold: #3d7a4a;
  --gold-2: #6aaa78;
  --gold-3: #2d5c38;
  --accent: #8a6b2f;
  --header-bg: rgba(255, 255, 255, 0.94);
  --card-bg: #ffffff;
  --footer-bg: #122018;
  --footer-text: rgba(230, 240, 232, 0.8);
  --hero-overlay: linear-gradient(180deg, rgba(18,32,24,0.5), rgba(18,32,24,0.8));
  --section-dark-bg: linear-gradient(160deg, #122018, #1c2e24);
  --title-grad: linear-gradient(135deg, #122018 20%, #3d7a4a 55%, #122018 90%);
  --title-grad-dark: linear-gradient(135deg, #fff 10%, #6aaa78 50%, #fff 90%);
}

html[data-theme="copper-light"] {
  --ink: #1c1410;
  --ink-2: #2a1e18;
  --muted: #7a6860;
  --line: rgba(28, 20, 16, 0.1);
  --sand: #f7f2ef;
  --sand-2: #ebe3dd;
  --paper: #ffffff;
  --gold: #b5673d;
  --gold-2: #d4895f;
  --gold-3: #8c4a2a;
  --accent: #4a6678;
  --header-bg: rgba(255, 255, 255, 0.94);
  --card-bg: #ffffff;
  --footer-bg: #1c1410;
  --footer-text: rgba(245, 235, 228, 0.8);
  --hero-overlay: linear-gradient(180deg, rgba(28,20,16,0.5), rgba(28,20,16,0.8));
  --section-dark-bg: linear-gradient(160deg, #1c1410, #2a1e18);
  --title-grad: linear-gradient(135deg, #1c1410 20%, #b5673d 55%, #1c1410 90%);
  --title-grad-dark: linear-gradient(135deg, #fff 10%, #d4895f 50%, #fff 90%);
}

/* ---- DARK ---- */
html[data-theme="gold-dark"] {
  --ink: #f4f1ea;
  --ink-2: #e6e0d4;
  --muted: #a39e93;
  --line: rgba(244, 241, 234, 0.12);
  --sand: #141210;
  --sand-2: #1c1915;
  --paper: #1a1714;
  --gold: #e0b03a;
  --gold-2: #f2c55a;
  --gold-3: #c99520;
  --accent: #6aaa8a;
  --header-bg: rgba(20, 18, 16, 0.94);
  --card-bg: #221e19;
  --footer-bg: #0c0b09;
  --footer-text: rgba(244, 241, 234, 0.75);
  --hero-overlay: linear-gradient(180deg, rgba(8,8,6,0.55), rgba(8,8,6,0.88));
  --section-dark-bg: linear-gradient(160deg, #0c0b09, #1a1714);
  --title-grad: linear-gradient(135deg, #f4f1ea 20%, #e0b03a 55%, #f4f1ea 90%);
  --title-grad-dark: linear-gradient(135deg, #f4f1ea 10%, #f2c55a 50%, #f4f1ea 90%);
}

html[data-theme="charcoal-dark"] {
  --ink: #eef1f4;
  --ink-2: #d5dae0;
  --muted: #9aa3ad;
  --line: rgba(238, 241, 244, 0.12);
  --sand: #121416;
  --sand-2: #1a1d21;
  --paper: #181b1f;
  --gold: #d4a017;
  --gold-2: #e8b84a;
  --gold-3: #b88910;
  --accent: #5b8fa8;
  --header-bg: rgba(18, 20, 22, 0.95);
  --card-bg: #1f2328;
  --footer-bg: #0a0b0c;
  --footer-text: rgba(238, 241, 244, 0.75);
  --hero-overlay: linear-gradient(180deg, rgba(6,7,8,0.55), rgba(6,7,8,0.88));
  --section-dark-bg: linear-gradient(160deg, #0a0b0c, #181b1f);
  --title-grad: linear-gradient(135deg, #eef1f4 20%, #d4a017 55%, #eef1f4 90%);
  --title-grad-dark: linear-gradient(135deg, #eef1f4 10%, #e8b84a 50%, #eef1f4 90%);
}

html[data-theme="forest-dark"] {
  --ink: #eaf3ec;
  --ink-2: #d4e4d8;
  --muted: #95a99a;
  --line: rgba(234, 243, 236, 0.12);
  --sand: #101612;
  --sand-2: #162019;
  --paper: #15201a;
  --gold: #6bbb7a;
  --gold-2: #8fd49b;
  --gold-3: #4a9a58;
  --accent: #c4a35a;
  --header-bg: rgba(16, 22, 18, 0.95);
  --card-bg: #1a2620;
  --footer-bg: #0a0f0c;
  --footer-text: rgba(234, 243, 236, 0.75);
  --hero-overlay: linear-gradient(180deg, rgba(6,10,8,0.55), rgba(6,10,8,0.88));
  --section-dark-bg: linear-gradient(160deg, #0a0f0c, #15201a);
  --title-grad: linear-gradient(135deg, #eaf3ec 20%, #6bbb7a 55%, #eaf3ec 90%);
  --title-grad-dark: linear-gradient(135deg, #eaf3ec 10%, #8fd49b 50%, #eaf3ec 90%);
}

html[data-theme="navy-dark"] {
  --ink: #e8eef6;
  --ink-2: #cfd9e8;
  --muted: #8f9db0;
  --line: rgba(232, 238, 246, 0.12);
  --sand: #0e1218;
  --sand-2: #151b24;
  --paper: #141a24;
  --gold: #5b9fd4;
  --gold-2: #7fb6e0;
  --gold-3: #3d7fb0;
  --accent: #d4a05a;
  --header-bg: rgba(14, 18, 24, 0.95);
  --card-bg: #1a2230;
  --footer-bg: #080b10;
  --footer-text: rgba(232, 238, 246, 0.75);
  --hero-overlay: linear-gradient(180deg, rgba(6,8,12,0.55), rgba(6,8,12,0.88));
  --section-dark-bg: linear-gradient(160deg, #080b10, #141a24);
  --title-grad: linear-gradient(135deg, #e8eef6 20%, #5b9fd4 55%, #e8eef6 90%);
  --title-grad-dark: linear-gradient(135deg, #e8eef6 10%, #7fb6e0 50%, #e8eef6 90%);
}

html[data-theme="wine-dark"] {
  --ink: #f5ecec;
  --ink-2: #e4d4d4;
  --muted: #a89898;
  --line: rgba(245, 236, 236, 0.12);
  --sand: #160f10;
  --sand-2: #201617;
  --paper: #1d1416;
  --gold: #d47a6b;
  --gold-2: #e49a8c;
  --gold-3: #b85a4c;
  --accent: #c4a05a;
  --header-bg: rgba(22, 15, 16, 0.95);
  --card-bg: #261a1c;
  --footer-bg: #0c0809;
  --footer-text: rgba(245, 236, 236, 0.75);
  --hero-overlay: linear-gradient(180deg, rgba(10,6,7,0.55), rgba(10,6,7,0.88));
  --section-dark-bg: linear-gradient(160deg, #0c0809, #1d1416);
  --title-grad: linear-gradient(135deg, #f5ecec 20%, #d47a6b 55%, #f5ecec 90%);
  --title-grad-dark: linear-gradient(135deg, #f5ecec 10%, #e49a8c 50%, #f5ecec 90%);
}

/* Map theme tokens onto existing CSS variables usage */
html[data-theme] body,
html:not([data-theme]) body {
  color: var(--ink);
  background:
    radial-gradient(900px 500px at 100% -10%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 55%),
    linear-gradient(180deg, var(--paper) 0%, var(--sand) 45%, var(--sand-2) 100%);
}

html[data-theme] .site-header,
html:not([data-theme]) .site-header {
  background: var(--header-bg);
}

html[data-theme] .service-card,
html[data-theme] .why-card,
html[data-theme] .quote-panel,
html[data-theme] .about-info-card,
html[data-theme] .about-card,
html[data-theme] .offerte-dialog,
html:not([data-theme]) .service-card,
html:not([data-theme]) .why-card,
html:not([data-theme]) .quote-panel,
html:not([data-theme]) .about-info-card,
html:not([data-theme]) .about-card,
html:not([data-theme]) .offerte-dialog {
  background: var(--card-bg);
  border-color: var(--line);
}

html[data-theme] .site-footer,
html:not([data-theme]) .site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
}

html[data-theme] .hero-overlay,
html:not([data-theme]) .hero-overlay {
  background: var(--hero-overlay), radial-gradient(700px 420px at 50% 35%, color-mix(in srgb, var(--gold) 28%, transparent), transparent 70%);
}

html[data-theme] .section-dark,
html:not([data-theme]) .section-dark {
  background: var(--section-dark-bg);
}

html[data-theme] .section-intro h1,
html[data-theme] .section-intro h2,
html[data-theme] .page-hero h1,
html[data-theme] .offerte-head h2,
html:not([data-theme]) .section-intro h1,
html:not([data-theme]) .section-intro h2,
html:not([data-theme]) .page-hero h1,
html:not([data-theme]) .offerte-head h2 {
  background: var(--title-grad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-theme] .section-dark .section-intro h2,
html[data-theme] .cta-inner h2,
html:not([data-theme]) .section-dark .section-intro h2,
html:not([data-theme]) .cta-inner h2 {
  background: var(--title-grad-dark);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Homepage ads */
.ads-section { padding-top: 0; }
.ads-grid {
  display: grid;
  gap: 1.5rem;
}
.ad-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card-bg, #fff);
  box-shadow: var(--shadow-soft);
}
.ad-media {
  min-height: 200px;
  overflow: hidden;
}
.ad-media img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
}
.ad-copy {
  padding: 1.75rem 1.5rem 1.9rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}
.ad-copy h2 {
  margin: 0;
  font-size: clamp(1.55rem, 2.8vw, 2.15rem);
}
.ad-copy p { margin: 0; color: var(--muted); max-width: 36rem; }
.ad-copy .btn { margin-top: 0.55rem; }

@media (min-width: 768px) {
  .ad-card {
    grid-template-columns: 0.95fr 1.05fr;
    align-items: stretch;
  }
  .ad-media { min-height: 260px; }
  .ad-media img { min-height: 260px; }
  .ad-copy {
    padding: 2.25rem 2rem;
    text-align: left;
    align-items: flex-start;
  }
  .ad-copy h2,
  .ad-copy .eyebrow { text-align: left; }
}