/* ============================================================
   Premium Expert System — theme previews (brand exploration)
   Set by js/theme.js via <html data-theme="...">. No attribute = current violet.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&family=Spectral:wght@500;600&display=swap');

/* A. Ink + Copper */
html[data-theme="copper"] {
  --violet: #c4562a; --violet-dark: #a3441f; --accent-rgb: 196, 86, 42;
  --grey-soft: #f5efe6; --grey-line: #e6dccd;
  --ink: #111111; --black: #111111;
  --q-violet: #c4562a; --q-violet-dark: #a3441f; --q-violet-light: #eb9a74; --q-ink: #111111;
}

/* B. Private Bank */
html[data-theme="bank"] {
  --violet: #b08d4a; --violet-dark: #8e7038; --accent-rgb: 176, 141, 74;
  --grey-soft: #f6f1e7; --grey-line: #e4dccb;
  --ink: #0f3b2e; --black: #0f3b2e;
  --q-violet: #b08d4a; --q-violet-dark: #8e7038; --q-violet-light: #d9bf86; --q-ink: #0f3b2e;
}

/* C. Midnight + Champagne (champagne deepened so white button text stays readable) */
html[data-theme="midnight"] {
  --violet: #a8834f; --violet-dark: #8a6a3c; --accent-rgb: 168, 131, 79;
  --grey-soft: #f7f5f0; --grey-line: #e5e0d6;
  --ink: #0e1a2b; --black: #0e1a2b;
  --q-violet: #a8834f; --q-violet-dark: #8a6a3c; --q-violet-light: #d8c3a0; --q-ink: #0e1a2b;
}

/* D. Oxblood + Serif (frontend-design direction): new palette and type on the
   existing content. Drops the all-caps treatments, coloured headline words,
   button arrows and the offset photo shadow. */
html[data-theme="editorial"] {
  --violet: #6e1e2b; --violet-dark: #561622; --accent-rgb: 110, 30, 43;
  --grey-soft: #f7f8f7; --grey-line: #d9ddd8;
  --ink: #1a1f1c; --black: #1a1f1c; --muted: #4a524d;
  --q-violet: #8a2a3a; --q-violet-dark: #6e1e2b; --q-violet-light: #d9a3ad; --q-ink: #1a1f1c;
  --font-display: 'Spectral', Georgia, serif;
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --anton: 'Spectral', Georgia, serif; --body: 'Public Sans', -apple-system, sans-serif;
  --q-anton: 'Spectral', Georgia, serif; --q-body: 'Public Sans', -apple-system, sans-serif;
  --radius: 4px;
}
html[data-theme="editorial"] * { text-transform: none !important; letter-spacing: normal !important; }
html[data-theme="editorial"] :is(h1, h2, h3, h4, .brand, .q-intro-h) {
  font-weight: 600; letter-spacing: -0.02em !important; line-height: 1.1;
}
html[data-theme="editorial"] h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
html[data-theme="editorial"] h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
html[data-theme="editorial"] h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
html[data-theme="editorial"] .accent,
html[data-theme="editorial"] .brand .sys { color: inherit; }
html[data-theme="editorial"] .btn svg { display: none; }
html[data-theme="editorial"] .hero-photo { box-shadow: none; }
/* oxblood is too dark to read on the dark sections, so text there uses a light rose */
html[data-theme="editorial"] :is(.section--dark, .case, .contrast .after, .site-footer) { --violet: #e3aab4; }
html[data-theme="editorial"] .section--dark .btn--primary { background: #6e1e2b; border-color: #6e1e2b; }

/* ---- Theme toggle (footer) ---------------------------------- */
.theme-toggle {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font: 500 .85rem/1 'DM Sans', sans-serif; color: rgba(255, 255, 255, 0.6);
}
.theme-toggle--floating {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 9999;
  margin: 0; padding: .5rem .75rem; border: 0; border-radius: 999px;
  background: rgba(10, 10, 10, 0.88); max-width: calc(100% - 32px);
}
.theme-toggle button {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .8rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2); background: transparent;
  color: rgba(255, 255, 255, 0.85); font: inherit;
}
.theme-toggle button[aria-pressed="true"] { background: #fff; color: #111; border-color: #fff; }
.theme-toggle .swatch {
  width: 14px; height: 14px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}