/* Optional home colour studies; selected through ?palette=. */
body[data-palette] {
  --text: #123e43;
  --muted: #46676b;
  --accent: #007f82;
  --accent-dark: #006366;
  --accent-soft: #d5f3ed;
  --warm: #ffdbc8;
  --paper: #fffcf6;
  --dark: #073f46;
  --peach: #007f82;
  --sun: #ffc857;
  --shadow: 0 20px 46px rgba(17, 80, 83, 0.1);
  background: var(--paper);
}
body[data-palette="lilla"] {
  --text: #3e2b59;
  --muted: #685b78;
  --accent: #7751a8;
  --accent-dark: #5b368b;
  --accent-soft: #ece1ff;
  --warm: #ffe2ce;
  --paper: #fffaf8;
  --dark: #3f2b60;
  --peach: #7751a8;
  --shadow: 0 20px 46px rgba(91, 54, 139, 0.1);
}
body[data-palette="oceano"] {
  --text: #153752;
  --muted: #4d677c;
  --accent: #1e6399;
  --accent-dark: #174b75;
  --accent-soft: #dceefb;
  --warm: #ffe8ae;
  --paper: #f8fcff;
  --dark: #133b5b;
  --peach: #1e6399;
  --shadow: 0 20px 46px rgba(21, 55, 82, 0.1);
}
body[data-palette] .site-notice { background: var(--dark); }
body[data-palette] .site-notice a { color: #ffe090; }
body[data-palette] .site-header { background: var(--paper); border-color: var(--accent-soft); }
body[data-palette] .hero {
  background: radial-gradient(ellipse at 90% 12%, var(--warm), transparent 50%),
    linear-gradient(120deg, var(--accent-soft), var(--paper) 80%);
  padding-bottom: 3rem;
  border-radius: 0 0 48px 48px;
}
body[data-palette] .hero-copy h1 { color: var(--accent-dark); }
body[data-palette] .hero-pill { background: var(--accent-soft); color: var(--accent-dark); }
body[data-palette] .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 10px 24px var(--accent-soft); }
body[data-palette] .btn-primary:hover { background: var(--accent-dark); }
body[data-palette] .btn-secondary,
body[data-palette] .cart-link { background: #fff; color: var(--accent-dark); box-shadow: inset 0 0 0 1px var(--accent); }
body[data-palette] .eyebrow { background: var(--accent-soft); color: var(--accent-dark); }
body[data-palette] .eyebrow::before { background: var(--accent); }
body[data-palette] .trust-row span { background: #ffffffc9; color: var(--text); }
body[data-palette] .hero-card { background: #fff; border-color: var(--accent-soft); }
body[data-palette] .hero-card-accent { background: var(--warm); }
body[data-palette] .hero-detail-card,
body[data-palette] .process-strip { background: var(--dark); }
body[data-palette] .hero-detail-card .eyebrow { color: #fff; background: #ffffff21; }
body[data-palette] .value-grid article { background: var(--accent-soft); border-color: transparent; }
body[data-palette] .value-grid article:nth-child(2) { background: var(--warm); }
body[data-palette] .value-grid article:nth-child(3) { background: #fff1c6; }
body[data-palette] .preserve-frame,
body[data-palette] .compare-focus-shell { background: var(--accent-soft); border-color: transparent; }
body[data-palette] .preserve-card .compare-chip { background: var(--accent); }
body[data-palette] .site-footer { background: var(--accent-soft); }
body[data-palette] .footer-kicker { color: var(--accent-dark); }
.palette-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; padding: 1.1rem 0; }
.palette-picker > span { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; margin-right: 0.4rem; }
.palette-picker a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 0.85rem; border: 1px solid var(--accent-soft); border-radius: 999px; font-size: 0.8rem; background: #fff; }
.palette-picker a[aria-current] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); font-weight: 800; }
.palette-dot { width: 0.85rem; height: 0.85rem; border-radius: 50%; }
.palette-dot-corallo { background: linear-gradient(135deg, #00888a 50%, #ff956e 50%); }
.palette-dot-lilla { background: linear-gradient(135deg, #8b62ba 50%, #ffcba8 50%); }
.palette-dot-oceano { background: linear-gradient(135deg, #216caa 50%, #ffd15b 50%); }
@media (max-width: 760px) {
  .palette-picker { gap: 0.5rem; }
  .palette-picker > span { width: 100%; }
  .palette-picker a { font-size: 0.74rem; padding: 0.55rem 0.65rem; }
  body[data-palette] .hero { border-radius: 0 0 28px 28px; }
}