/* Palette experiments live only in this independent design copy. */
:root {
  --seaglass: #5fa8b8;
  --seaglass-mist: #e3f1f4;
  --seaglass-deep: #2e6e7c;
  --graybrown: #524a3f;
  --ink: #524a3f;
  --muted: #524a3f;
  --paper: #fffdf8;
  --pale: #e3f1f4;
  --line: rgba(46, 110, 124, .22);
  --studio-accent-ink: #82682c;
  --studio-logo-filter: none;
  --studio-seller-background: #fffdf8;
  --studio-gold: #c8b27b;
  --studio-gold-ink: #82682c;
  --studio-gold-light: #f7ecd1;
  --studio-gold-button-ink: #173d46;
}
:root[data-studio-theme="seaglass-accent"],
:root[data-studio-theme="monochrome"] {
  --seaglass: #5fa8b8;
  --seaglass-mist: #f3f4f4;
  --seaglass-deep: #111111;
  --graybrown: #474747;
  --ink: #222222;
  --muted: #474747;
  --paper: #ffffff;
  --pale: #f3f4f4;
  --line: rgba(17, 17, 17, .18);
  --studio-accent-ink: #2e6e7c;
  --studio-logo-filter: grayscale(1) contrast(2.5);
  --studio-seller-background: #fafafa;
}
:root[data-studio-theme="monochrome"] {
  --seaglass: #111111;
  --seaglass-mist: #f1f1f1;
  --pale: #f1f1f1;
  --studio-accent-ink: #111111;
}
:root[data-studio-theme="original"] {
  --seaglass: #5fa8b8;
  --seaglass-mist: #e3f1f4;
  --seaglass-deep: #2e6e7c;
  --graybrown: #524a3f;
  --ink: #524a3f;
  --muted: #524a3f;
  --paper: #ffffff;
  --pale: #e3f1f4;
  --line: rgba(46, 110, 124, .28);
  --studio-accent-ink: #2e6e7c;
  --studio-logo-filter: none;
  --studio-seller-background: #f7fbfc;
}
.logo-brand img { filter: var(--studio-logo-filter); }
#sellers-guide { background: var(--studio-seller-background); }
.eyebrow, .card-number, .card-topic, .text-link { color: var(--studio-accent-ink); }
.text-link { border-bottom-color: var(--studio-accent-ink); }
.selling .eyebrow, .page-cta .eyebrow, .contact .eyebrow,
.calculator-result .eyebrow, .hero .eyebrow { color: var(--seaglass-mist); }
.hero .hero-eyebrow { color: var(--seaglass-mist); }
.light-link { color: var(--seaglass-mist); border-color: var(--seaglass-mist); }
.light-link:hover { color: #fff; border-color: #fff; }
:root:not([data-studio-theme="original"]) .contact h2 em { color: var(--seaglass-mist); }

/* Seaglass and gold: warm accents, generous light surfaces and readable type. */
:root[data-studio-theme="seaglass-gold"] :is(.intro h2 em, .section-heading h2 em,
  .content-heading h2 em, .page-hero h1 em, .about-copy h2 em,
  .inquiry-intro h2 em, .questions h2 em) { color: var(--studio-gold-ink); }
:root[data-studio-theme="seaglass-gold"] :is(.hero h1 em, .selling h2 em, .contact h2 em) { color: var(--studio-gold-light); }
:root[data-studio-theme="seaglass-gold"] :is(.selling .eyebrow, .page-cta .eyebrow,
  .contact .eyebrow, .calculator-result .eyebrow) { color: var(--studio-gold-light); }
:root[data-studio-theme="seaglass-gold"] .button-accent {
  background: var(--studio-gold);
  border-color: var(--studio-gold);
  color: var(--studio-gold-button-ink);
}
:root[data-studio-theme="seaglass-gold"] .button-accent:hover { background: var(--studio-gold-light); border-color: var(--studio-gold-light); }
:root[data-studio-theme="seaglass-gold"] :is(.page-hero-image, .resource-image, .inquiry-panel) { border-bottom-color: var(--studio-gold); border-top-color: var(--studio-gold); }
:root[data-studio-theme="seaglass-gold"] :is(.header, .footer-top) { border-bottom-color: var(--studio-gold); }
:root[data-studio-theme="seaglass-gold"] .desktop-nav a[aria-current="page"] { border-bottom-color: var(--studio-gold); }
:root[data-studio-theme="seaglass-gold"] :is(.selling, .page-cta, .calculator-result) { border-top: 3px solid var(--studio-gold); }
:root[data-studio-theme="seaglass-gold"] .footer { background: #fff; }

/* Keep the comparison controls neutral in every palette. */
.color-studio {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  width: 256px;
  max-width: calc(100vw - 32px);
  z-index: 60;
  color: #111;
  font-family: var(--body);
  font-size: .875rem;
  line-height: 1.5;
}
.studio-toggle {
  display: flex;
  align-items: center;
  gap: 15px;
  list-style: none;
  padding: 12px 16px;
  min-height: 66px;
  border: 1px solid #d7d7d7;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 4px 20px #00000016;
  cursor: pointer;
}
.studio-toggle::-webkit-details-marker { display: none; }
.studio-toggle-copy { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.studio-toggle strong { color: #111; font-size: .9rem; font-weight: 600; }
.studio-toggle-copy > span { color: #555; font-size: .75rem; }
.studio-toggle-mark { color: #111; font-size: 1.3rem; line-height: 1; }
.studio-details[open] .studio-toggle-mark { transform: rotate(45deg); }
.studio-panel {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: min(390px, calc(100vw - 32px));
  padding: 25px;
  max-height: calc(100svh - 125px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid #d7d7d7;
  border-radius: 3px;
  box-shadow: 0 10px 40px #00000020;
}
.studio-details:not([open]) .studio-panel { display: none; }
.studio-panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.studio-kicker { color: #555; font-size: .64rem; letter-spacing: .15em; font-weight: 600; margin: 0 0 9px; }
.studio-panel h2 { color: #111; font-family: var(--display); font-size: 2rem; letter-spacing: -.02em; line-height: 1.05; }
.studio-close { display: grid; place-items: center; border: 0; background: transparent; color: #111; font-size: 1.6rem; line-height: 1; width: 36px; height: 36px; flex-shrink: 0; cursor: pointer; margin: -6px -9px 0 0; }
.studio-intro { margin: 14px 0 20px; color: #555; font-size: .85rem; }
.studio-presets { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.studio-preset { display: flex; align-items: center; gap: 10px; border: 1px solid #d7d7d7; padding: 13px 11px; cursor: pointer; border-radius: 2px; background: #fff; }
.studio-preset:has(input:checked) { border-color: #111; box-shadow: inset 0 0 0 1px #111; background: #fafafa; }
.studio-preset input { width: 16px; height: 16px; flex-shrink: 0; margin: 0; accent-color: #111; }
.studio-preset-copy { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 0; }
.studio-preset-copy strong { font-size: .86rem; color: #111; font-weight: 600; }
.studio-preset-copy > span { font-size: .75rem; color: #555; line-height: 1.5; }
.studio-swatches, .studio-mini-swatches { display: flex; flex-shrink: 0; gap: 3px; }
.studio-swatches i, .studio-mini-swatches i { display: block; width: 13px; height: 26px; border: 1px solid #00000025; }
.studio-mini-swatches i { width: 8px; height: 22px; }
.studio-footnote { margin: 18px 0 13px; color: #555; font-size: .75rem; }
.studio-original-link { display: inline-block; color: #111; font-size: .8rem; text-decoration: underline; text-underline-offset: 4px; }
.color-studio :is(a, button, summary, input):focus-visible { outline: 2px solid #111; outline-offset: 4px; }
@media (max-width: 540px) {
  .color-studio { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 220px; }
  .studio-toggle { min-height: 56px; padding: 9px 13px; gap: 12px; }
  .studio-panel { padding: 21px; max-height: calc(100svh - 105px); }
  .studio-swatches i { width: 11px; height: 23px; }
}
@media print { .color-studio { display: none; } }