/* Color options preview (css/palette.css + js/palette.js): a "Try colors" button that lets the owners compare 5 palettes.
 * Each palette only swaps the color tokens from css/site.css :root ("Sacramento Sun" is the default and lives there).
 * Pick with the button or a link: ?palette=logo-red. WordPress build: a setting, on for the preview, off at launch
 * (off = don't enqueue these two files; copy the chosen palette's values into :root). */

/* b. Logo Red: clean white and warm light gray, charcoal text, the logo's red for buttons and accents */
html[data-palette="logo-red"] {
  --bg: #FFFFFF; --surface: #FAF9F7; --bg-alt: #F1EFEC; --line: #E2DFDA; --line-2: #D6D2CB; --line-hover: #B9B3AA;
  --field: #FFFFFF; --selected: #FFF3F4;
  --accent: #C8102E; --accent-hover: #A00D25; --on-accent: #FFFFFF; --on-accent-soft: #FFECEE;
  --accent-strong: #AE0F29; --accent-soft: #FBE4E7;
  --deep: #2A2A2C; --deep-2: #3A3A3D; --on-deep: #FFFFFF; --on-deep-soft: #EDEDED; --on-deep-muted: #D2D2D2; --on-deep-faint: #B4B4B4; --on-deep-accent: #FF9DAA;
  --ink: #2A2A2C; --ink-soft: #4B4B4E; --muted: #5F5F63; --brand: #D62828;
  --ok: #3E7A4A; --ok-soft: #E3F0E5; --live: #7FCB7A; --star: #E8A33A;
  --error: #A81E1E; --error-soft: #FFF5F4; --error-line: #E2A3A3; --on-error: #FFFFFF;
  --shadow-rgb: 30, 30, 32;
  --hero-scrim: rgba(255, 255, 255, .9); --hero-scrim-line: rgba(255, 255, 255, .7);
  --hero-ink: #2A2A2C; --hero-ink-soft: #3B3B3E; --hero-em: #A00D25;
}

/* c. Patrol Navy: white and light cool gray, deep navy, a bright sky-blue accent (navy text on it) */
html[data-palette="patrol-navy"] {
  --bg: #FFFFFF; --surface: #F7F9FC; --bg-alt: #EDF2F8; --line: #DCE3EC; --line-2: #CAD5E3; --line-hover: #9DB2CC;
  --field: #FFFFFF; --selected: #EEF8FF;
  --accent: #38B6F2; --accent-hover: #6CCBF7; --on-accent: #0B1F3A; --on-accent-soft: #0F2848;
  --accent-strong: #035F96; --accent-soft: #DDF1FC;
  --deep: #0B1F3A; --deep-2: #17325A; --on-deep: #FFFFFF; --on-deep-soft: #E2E8F0; --on-deep-muted: #C3CEDD; --on-deep-faint: #A3B3C8; --on-deep-accent: #7FD3FA;
  --ink: #0F1B2D; --ink-soft: #3A4A60; --muted: #506078; --brand: #D62828;
  --ok: #2F7A55; --ok-soft: #DFF3E9; --live: #6FD39A; --star: #E8A33A;
  --error: #A81E1E; --error-soft: #FFF5F4; --error-line: #E2A3A3; --on-error: #FFFFFF;
  --shadow-rgb: 11, 31, 58;
  --hero-scrim: rgba(247, 249, 252, .9); --hero-scrim-line: rgba(255, 255, 255, .7);
  --hero-ink: #0B1F3A; --hero-ink-soft: #24344D; --hero-em: #035F96;
}

/* d. Solar Gold: warm off-white, deep navy, a golden sun yellow accent (dark text on yellow) */
html[data-palette="solar-gold"] {
  --bg: #FFFBF2; --surface: #FFFDF8; --bg-alt: #F7EEDA; --line: #EADFC6; --line-2: #DFD0AC; --line-hover: #C9B275;
  --field: #FFFFFF; --selected: #FFF7DB;
  --accent: #F2B705; --accent-hover: #FFCB3D; --on-accent: #1B2440; --on-accent-soft: #29324F;
  --accent-strong: #7A5700; --accent-soft: #FCEFC2;
  --deep: #1B2440; --deep-2: #283458; --on-deep: #FFFFFF; --on-deep-soft: #E8EBF2; --on-deep-muted: #C8CEDC; --on-deep-faint: #A9B1C5; --on-deep-accent: #F7C948;
  --ink: #1B2440; --ink-soft: #444D66; --muted: #585F75; --brand: #D62828;
  --ok: #4D7A3D; --ok-soft: #E5F0DC; --live: #7FCB7A; --star: #E8A33A;
  --error: #A81E1E; --error-soft: #FFF5F4; --error-line: #E2A3A3; --on-error: #FFFFFF;
  --shadow-rgb: 27, 36, 64;
  --hero-scrim: rgba(255, 253, 248, .9); --hero-scrim-line: rgba(255, 255, 255, .7);
  --hero-ink: #1B2440; --hero-ink-soft: #2E3753; --hero-em: #7A5700;
}

/* e. Valley Sage: soft sage and cream, deep forest green, a muted clay accent */
html[data-palette="valley-sage"] {
  --bg: #F5F6EF; --surface: #FBFBF6; --bg-alt: #E5EBDC; --line: #D6DECB; --line-2: #C6D1B5; --line-hover: #A6B68F;
  --field: #FFFFFF; --selected: #FBF0E9;
  --accent: #9C5536; --accent-hover: #83452B; --on-accent: #FFFFFF; --on-accent-soft: #FBEDE5;
  --accent-strong: #864A2F; --accent-soft: #F1E0D5;
  --deep: #22402D; --deep-2: #2E523D; --on-deep: #FFFFFF; --on-deep-soft: #E4EDE6; --on-deep-muted: #C4D4C8; --on-deep-faint: #A6BCAC; --on-deep-accent: #F0C3A9;
  --ink: #1E3326; --ink-soft: #40544A; --muted: #53665A; --brand: #D62828;
  --ok: #3E6B4B; --ok-soft: #DDEBDF; --live: #8FD39A; --star: #E8A33A;
  --error: #A81E1E; --error-soft: #FFF5F4; --error-line: #E2A3A3; --on-error: #FFFFFF;
  --shadow-rgb: 34, 64, 45;
  --hero-scrim: rgba(251, 251, 246, .9); --hero-scrim-line: rgba(255, 255, 255, .7);
  --hero-ink: #22402D; --hero-ink-soft: #2F4638; --hero-em: #864A2F;
}

/* ---------- the "Try colors" button and panel ---------- */
.pal { position: fixed; left: 20px; bottom: 20px; z-index: 85; font-family: var(--body); }
.pal[hidden] { display: none; }
.pal-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 16px 6px 6px; border-radius: 999px;
  background: var(--surface); color: var(--deep); border: 1px solid var(--line); box-shadow: var(--shadow-lg); cursor: pointer; font: 800 .93rem/1 var(--body);
}
.pal-btn:hover { border-color: var(--line-hover); }
.pal-btn .pal-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); }
.pal-btn .pal-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pal-btn[aria-expanded="true"] { border-color: var(--deep); }
.pal-panel {
  position: absolute; left: 0; bottom: calc(100% + 10px); width: min(300px, calc(100vw - 24px)); background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 16px;
}
.pal-panel[hidden] { display: none; }
.pal-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pal-panel h2 { font: 600 1.15rem/1.2 var(--head); font-variation-settings: "SOFT" 100; color: var(--deep); margin: 0; }
.pal-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--field); color: var(--deep); cursor: pointer; display: grid; place-items: center; flex: none; }
.pal-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pal-panel p { margin: 4px 0 12px; font-size: .86rem; color: var(--muted); line-height: 1.4; }
.pal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pal-opt {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 10px; border-radius: 12px; cursor: pointer; text-align: left;
  background: var(--field); border: 2px solid var(--line); color: var(--ink); font: 700 .93rem/1.2 var(--body);
}
.pal-opt:hover { border-color: var(--line-hover); }
.pal-opt[aria-pressed="true"] { border-color: var(--deep); }
.pal-opt .sw { display: inline-flex; flex: none; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), .15); }
.pal-opt .sw i { width: 14px; height: 26px; }
.pal-opt .cur { margin-left: auto; font: 800 .72rem/1 var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--on-deep); background: var(--deep); padding: 4px 7px; border-radius: 6px; visibility: hidden; }
.pal-opt[aria-pressed="true"] .cur { visibility: visible; }
.pal-copy { margin-top: 12px; width: 100%; min-height: 44px; border-radius: 999px; border: 1.5px solid var(--deep); background: var(--field); color: var(--deep); font: 800 .9rem/1 var(--body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pal-copy:hover { background: var(--deep); color: var(--on-deep); }
.pal-copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pal-status { min-height: 1.2em; margin: 8px 0 0; font-size: .84rem; font-weight: 700; color: var(--ok); text-align: center; }
.pal-status:empty { display: none; }
.pal-fallback { margin-top: 8px; }
.pal-fallback[hidden] { display: none; }
.pal-fallback label { display: block; font-size: .82rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; }
.pal-fallback input { width: 100%; min-height: 40px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--field); color: var(--ink); padding: 0 10px; font: 400 .85rem var(--body); }
.pal-tip { display: none; }
/* phones: a 44px round icon button at the top right, just under the sticky header (clear of the hero buttons,
   the chat button and the action bar); the panel opens downward */
@media (max-width: 760px) {
  .pal { left: auto; right: 12px; bottom: auto; top: 112px; }
  .pal-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .pal-btn .pal-txt { display: none; }
  .pal-btn .pal-ic { width: 44px; height: 44px; background: transparent; }
  .pal-panel { left: auto; right: 0; bottom: auto; top: calc(100% + 8px); max-height: calc(100vh - 180px); max-height: calc(100dvh - 180px); overflow-y: auto; }
  .pal-tip {
    display: block; position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
    background: var(--deep); color: var(--on-deep); font: 800 .82rem/1 var(--body); padding: 8px 10px; border-radius: 10px; box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s;
  }
  .pal-tip::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; background: inherit; transform: translateY(-50%) rotate(45deg); }
  .pal.tip-on .pal-tip { opacity: 1; visibility: visible; transition: opacity .4s ease; }
}
}