/* ==========================================================================
   Palette review tool — NOT part of the shipped design system.
   Activated only via ?palette=<name> (see the inline head script in each
   page and the "Local palette study" block in assets/js/main.js). Safe to
   delete this file, its <link> tag, and that JS block together once a
   final palette is chosen; nothing else in the site depends on them.
   ========================================================================== */

/* ---- Color palette previews (selected with ?palette=...) ---- */
:root[data-palette="heritage-path"] {
  --cream: #EBEDE3;
  --ink: #0B1849;
  --muted: #4C5369;
  --hairline: #C9CBBB;
  --rule: #0B1849;
  --accent: #755800;
  --accent-rgb: 117, 88, 0;
  --accent-surface: #E4B028;
  --accent-surface-rgb: 228, 176, 40;
  --on-accent: #0B1849;
  --support: #124D1C;
  --gold: #755800;
  --gold-rgb: 117, 88, 0;
  --gold-glow: rgba(228, 176, 40, 0.48);
  --ivory: #FAF8F0;
  --ink-band: #0B1849;
  --ink-band-fg: #FAF8F0;
  color-scheme: light;
}

:root[data-palette="heritage-dark"] {
  --cream: #0B1849;
  --ink: #EBEDE3;
  --muted: #B9BCAE;
  --hairline: #3F4A76;
  --rule: #EBEDE3;
  --accent: #E4B028;
  --accent-rgb: 228, 176, 40;
  --accent-surface: #E4B028;
  --accent-surface-rgb: 228, 176, 40;
  --on-accent: #0B1849;
  --support: #8FCB94;
  --gold: #E4B028;
  --gold-rgb: 228, 176, 40;
  --gold-glow: rgba(228, 176, 40, 0.58);
  --ivory: #101F55;
  --ink-band: #071239;
  --ink-band-fg: #EBEDE3;
  color-scheme: dark;
}

:root[data-palette="warm-signal"] {
  --cream: #E8E2DB;
  --ink: #1A3263;
  --muted: #5A5960;
  --hairline: #C7BEB3;
  --rule: #1A3263;
  --accent: #805300;
  --accent-rgb: 128, 83, 0;
  --accent-surface: #FAB95B;
  --accent-surface-rgb: 250, 185, 91;
  --on-accent: #1A3263;
  --support: #C8443E;
  --gold: #805300;
  --gold-rgb: 128, 83, 0;
  --gold-glow: rgba(250, 185, 91, 0.5);
  --ivory: #FFF9F1;
  --ink-band: #1A3263;
  --ink-band-fg: #FFF9F1;
  color-scheme: light;
}

:root[data-palette="quiet-atlantic"] {
  --cream: #F3F0E8;
  --ink: #16324F;
  --muted: #5B6266;
  --hairline: #D8D0C2;
  --rule: #16324F;
  --accent: #806000;
  --accent-rgb: 128, 96, 0;
  --accent-surface: #D5A62E;
  --accent-surface-rgb: 213, 166, 46;
  --on-accent: #16324F;
  --support: #2B6661;
  --gold: #806000;
  --gold-rgb: 128, 96, 0;
  --gold-glow: rgba(213, 166, 46, 0.46);
  --ivory: #FFFFFF;
  --ink-band: #16324F;
  --ink-band-fg: #FFFFFF;
  color-scheme: light;
}

:root[data-palette="truth-hearth"] {
  --cream: #F4F0E6;
  --ink: #10224A;
  --muted: #536B57;
  --hairline: #D8D0C2;
  --rule: #10224A;
  --accent: #914236;
  --accent-rgb: 145, 66, 54;
  --accent-visual: #D6A62F;
  --accent-surface: #D6A62F;
  --accent-surface-rgb: 214, 166, 47;
  --on-accent: #10224A;
  --support: #536B57;
  --gold: #806000;
  --gold-rgb: 128, 96, 0;
  --gold-glow: rgba(214, 166, 47, 0.5);
  --ivory: #FFFDF8;
  --ink-band: #10224A;
  --ink-band-fg: #F4F0E6;
  color-scheme: light;
}

:root[data-palette="hero-photo"] {
  --cream: #EDECF1;
  --ink: #1E1D1B;
  --muted: #4C6D44;
  --hairline: #C8CBC3;
  --rule: #1E1D1B;
  --accent: #4C6D44;
  --accent-rgb: 76, 109, 68;
  --accent-visual: #719A3B;
  --accent-surface: #D79F58;
  --accent-surface-rgb: 215, 159, 88;
  --on-accent: #1E1D1B;
  --support: #4C6D44;
  --gold: #7A531F;
  --gold-rgb: 122, 83, 31;
  --gold-glow: rgba(215, 159, 88, 0.5);
  --ivory: #F8F7F2;
  --ink-band: #1E1D1B;
  --ink-band-fg: #EDECF1;
  color-scheme: light;
}

:root[data-palette] .theme-toggle { display: none; }

.palette-preview-dock {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  max-width: calc(100vw - 2rem);
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 0.45rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ivory) 92%, transparent);
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(11, 24, 73, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.palette-preview-label {
  padding-inline: 0.6rem 0.35rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.palette-preview-dock button {
  min-height: 34px;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.palette-preview-dock button:hover,
.palette-preview-dock button:focus-visible { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.palette-preview-dock button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }

@media (max-width: 720px) {
  .palette-preview-dock {
    right: max(0.75rem, env(safe-area-inset-right));
    left: max(0.75rem, env(safe-area-inset-left));
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    overflow-x: auto;
    border-radius: 14px;
  }
  :root[data-palette] .floating-cta { bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
}