/* ==========================================================================
   palettes.css — TEMPORARY demo palette switcher.
   --------------------------------------------------------------------------
   Adds a second axis on top of the light/dark theme: `data-palette` on <html>.
   Each palette only declares its own accent family + a single neutral-tint hue;
   the steel neutrals are re-tinted toward that hue via color-mix (which
   preserves luminance, so light/dark contrast holds automatically). Glows are
   derived from --accent, so they follow each palette in both modes for free.

   The default palette ("Сталь" / red) sets NO data-palette attribute and keeps
   tokens.css untouched — i.e. this file is purely additive.

   ⟶ TO REMOVE THE FEATURE ENTIRELY, delete:
       • this file  (public/css/palettes.css)
       • public/js/palette-switcher.js
       • the `data-palette` line in base.njk's anti-flash <script>
       • the <link>/<script> tags for the two files above in base.njk
   ========================================================================== */

/* =========================================================================
   1. GENERIC NEUTRAL RE-TINT  (applies to every non-default palette)
   Each palette supplies --pal-tint; we bias the steel neutrals toward it by a
   few percent. Luminance barely moves, so contrast is preserved in both modes.
   ========================================================================= */
:root[data-palette]:not([data-palette="default"]) {
  --bg:        color-mix(in srgb, #EEF0F0 95%, var(--pal-tint));
  --bg-2:      color-mix(in srgb, #E4E7E7 94%, var(--pal-tint));
  --surface:   color-mix(in srgb, #FFFFFF 97%, var(--pal-tint));
  --surface-2: color-mix(in srgb, #F4F6F6 94%, var(--pal-tint));
  --surface-3: color-mix(in srgb, #EAEDED 93%, var(--pal-tint));
  --anchor:    color-mix(in srgb, #14181B 92%, var(--pal-tint));

  /* glows track the live --accent → correct in light AND dark */
  --glow:      color-mix(in srgb, var(--accent) 15%, transparent);
  --glow-soft: color-mix(in srgb, var(--accent) 6%, transparent);
}

:root[data-palette][data-theme="dark"]:not([data-palette="default"]) {
  --bg:        color-mix(in srgb, #15171A 90%, var(--pal-tint));
  --bg-2:      color-mix(in srgb, #1A1D21 90%, var(--pal-tint));
  --surface:   color-mix(in srgb, #1F2328 91%, var(--pal-tint));
  --surface-2: color-mix(in srgb, #262B31 90%, var(--pal-tint));
  --surface-3: color-mix(in srgb, #2E343B 90%, var(--pal-tint));
  --anchor:    color-mix(in srgb, #0E1013 88%, var(--pal-tint));
}

/* =========================================================================
   2. PER-PALETTE ACCENT FAMILIES
   --pal-tint : hue the neutrals are biased toward (set once, both modes).
   --pal-hot  : bright accent used on the always-dark bands (set once).
   Light block = light-mode accent; the [data-theme="dark"] block brightens it.
   ========================================================================= */

/* ── Кобальт ──────────────────────────────────────────────────────────── */
:root[data-palette="cobalt"] {
  --pal-tint: #2f6bff;
  --pal-hot: #5B92FF;
  --accent: #1F5BD6;
  --accent-hot: #2E6BF0;
  --accent-deep: #163F9E;
  --accent-ink: #FFFFFF;
}
:root[data-palette="cobalt"][data-theme="dark"] {
  --accent: #3E78F0;
  --accent-hot: #5B92FF;
  --accent-deep: #2A57C0;
}

/* ── Индиго ───────────────────────────────────────────────────────────── */
:root[data-palette="indigo"] {
  --pal-tint: #6a5cf0;
  --pal-hot: #8B7BFF;
  --accent: #4B3FCB;
  --accent-hot: #5D4FE6;
  --accent-deep: #362C96;
  --accent-ink: #FFFFFF;
}
:root[data-palette="indigo"][data-theme="dark"] {
  --accent: #6E60F0;
  --accent-hot: #8B7BFF;
  --accent-deep: #4E40C0;
}

/* ── Изумруд ──────────────────────────────────────────────────────────── */
:root[data-palette="emerald"] {
  --pal-tint: #16a86a;
  --pal-hot: #2FD08F;
  --accent: #138A57;
  --accent-hot: #1AA468;
  --accent-deep: #0C6440;
  --accent-ink: #FFFFFF;
}
:root[data-palette="emerald"][data-theme="dark"] {
  --accent: #17A368;
  --accent-hot: #25C281;
  --accent-deep: #0F7A4C;
}

/* ── Петроль ──────────────────────────────────────────────────────────── */
:root[data-palette="petrol"] {
  --pal-tint: #119a9a;
  --pal-hot: #28C7CE;
  --accent: #0C7C84;
  --accent-hot: #109AA0;
  --accent-deep: #07595E;
  --accent-ink: #FFFFFF;
}
:root[data-palette="petrol"][data-theme="dark"] {
  --accent: #15A6AD;
  --accent-hot: #28C7CE;
  --accent-deep: #0C7C84;
}

/* ── Медь ─────────────────────────────────────────────────────────────── */
:root[data-palette="copper"] {
  --pal-tint: #d9791f;
  --pal-hot: #F0913A;
  --accent: #B5641A;
  --accent-hot: #D1761F;
  --accent-deep: #8A4A12;
  --accent-ink: #FFFFFF;
}
:root[data-palette="copper"][data-theme="dark"] {
  --accent: #D67E2A;
  --accent-hot: #F0913A;
  --accent-deep: #A85F1C;
}

/* ── Бронза ───────────────────────────────────────────────────────────── */
:root[data-palette="bronze"] {
  --pal-tint: #b89324;
  --pal-hot: #D4B43C;
  --accent: #8C7320;
  --accent-hot: #A8881F;
  --accent-deep: #5F4E14;
  --accent-ink: #FFFFFF;
}
:root[data-palette="bronze"][data-theme="dark"] {
  --accent: #B89A2E;
  --accent-hot: #D4B43C;
  --accent-deep: #8C7320;
}

/* ── Слива ────────────────────────────────────────────────────────────── */
:root[data-palette="plum"] {
  --pal-tint: #c13ba0;
  --pal-hot: #E257B4;
  --accent: #A52679;
  --accent-hot: #C13391;
  --accent-deep: #771852;
  --accent-ink: #FFFFFF;
}
:root[data-palette="plum"][data-theme="dark"] {
  --accent: #C73C97;
  --accent-hot: #E257B4;
  --accent-deep: #971F6E;
}

/* ── Бордо ────────────────────────────────────────────────────────────── */
:root[data-palette="burgundy"] {
  --pal-tint: #9e2f4a;
  --pal-hot: #D24F69;
  --accent: #8E2138;
  --accent-hot: #A82C47;
  --accent-deep: #5E1626;
  --accent-ink: #FFFFFF;
}
:root[data-palette="burgundy"][data-theme="dark"] {
  --accent: #B23950;
  --accent-hot: #D24F69;
  --accent-deep: #82273C;
}

/* ── Графит (mono) ────────────────────────────────────────────────────── */
:root[data-palette="graphite"] {
  --pal-tint: #5b6770;       /* near-neutral steel: keeps the palette colourless */
  --pal-hot: #DCE3E8;
  --accent: #232A2F;
  --accent-hot: #323A40;
  --accent-deep: #14181B;
  --accent-ink: #FFFFFF;
}
:root[data-palette="graphite"][data-theme="dark"] {
  --accent: #C7D0D6;
  --accent-hot: #E2E9ED;
  --accent-deep: #9AA4AB;
  --accent-ink: #14181B;     /* accent is light now → ink flips to dark */
}

/* =========================================================================
   3. ALWAYS-DARK BANDS
   .trust / .tech-highlights / .parts-cta / .parts-banner hard-code the red
   accent + a dark-red corner, independent of theme. Re-point them at the
   palette's bright on-dark accent (--pal-hot) so they stay cohesive.
   (Specificity here beats the original single-class rules regardless of load
   order, so this wins even though home.css loads after this file.)
   ========================================================================= */
:root[data-palette]:not([data-palette="default"]) .trust,
:root[data-palette]:not([data-palette="default"]) .tech-highlights,
:root[data-palette]:not([data-palette="default"]) .parts-cta,
:root[data-palette]:not([data-palette="default"]) .parts-banner {
  --accent: var(--pal-hot);
  --glow: color-mix(in srgb, var(--pal-hot) 32%, transparent);
}

:root[data-palette]:not([data-palette="default"]) .parts-banner {
  background:
    radial-gradient(120% 150% at 90% -20%, color-mix(in srgb, var(--pal-hot) 24%, #14171b) 0%, transparent 52%),
    linear-gradient(150deg, #1b1e23 0%, #0f1115 100%);
}
:root[data-palette]:not([data-palette="default"]) .trust {
  background:
    radial-gradient(115% 80% at 86% -10%, color-mix(in srgb, var(--pal-hot) 22%, #141619) 0%, transparent 44%),
    linear-gradient(180deg, #181B20 0%, #101216 100%);
}
:root[data-palette]:not([data-palette="default"]) .tech-highlights {
  background:
    radial-gradient(120% 90% at 88% -10%, color-mix(in srgb, var(--pal-hot) 22%, #141619) 0%, transparent 46%),
    linear-gradient(180deg, #181B20 0%, #101216 100%);
}
:root[data-palette]:not([data-palette="default"]) .parts-cta {
  background:
    radial-gradient(120% 130% at 90% -20%, color-mix(in srgb, var(--pal-hot) 22%, #141619) 0%, transparent 52%),
    linear-gradient(180deg, #181B20 0%, #101216 100%);
}

/* parts-banner sub-elements that bake the red literal directly (home.css) */
:root[data-palette]:not([data-palette="default"]) .parts-banner__eyebrow {
  color: var(--pal-hot);
}
:root[data-palette]:not([data-palette="default"]) .parts-banner__glow {
  background: radial-gradient(circle, color-mix(in srgb, var(--pal-hot) 34%, transparent), transparent 64%);
}
:root[data-palette]:not([data-palette="default"]) .parts-banner__cog {
  color: color-mix(in srgb, var(--pal-hot) 10%, transparent);
}

/* =========================================================================
   4. THE SWITCHER WIDGET (bottom-left, temporary).
   Built by /js/palette-switcher.js. Styled with design tokens so the control
   itself reflects the chosen palette + theme.
   ========================================================================= */
.pal-switch {
  position: fixed;
  left: clamp(14px, 2vw, 24px);
  /* lift clear of the iOS home-indicator / Safari bottom chrome */
  bottom: calc(clamp(14px, 2vw, 24px) + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  font-family: var(--font-body);
}

.pal-switch__fab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s;
}
.pal-switch__fab:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.pal-switch__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: none;
  background: var(--accent);                 /* live: reflects current palette */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.pal-switch__fab-label { white-space: nowrap; }

.pal-switch__panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  width: min(320px, calc(100vw - 28px));
  /* never taller than the visible viewport (dvh tracks Safari's toolbars);
     the panel grows upward from the FAB, so capping the height keeps its top
     on-screen and lets the swatch list scroll instead of running off-board. */
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 84px - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.98);
  transform-origin: bottom left;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.pal-switch.is-open .pal-switch__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.pal-switch__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.pal-switch__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--text);
}
.pal-switch__badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
}

/* light / dark segmented control */
.pal-switch__modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.pal-switch__mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border: 0;
  border-radius: calc(var(--r-md) - 3px);
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.pal-switch__mode.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* swatch grid */
.pal-switch__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}
.pal-switch__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s var(--ease), background 0.2s;
}
.pal-switch__item:hover {
  transform: translateY(-1px);
  border-color: var(--line-2);
}
.pal-switch__item.is-active {
  border-color: var(--text);
  background: var(--surface);
}
.pal-switch__swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.pal-switch__item.is-active .pal-switch__swatch {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18),
              0 0 0 2px var(--surface),
              0 0 0 4px var(--text);
}
.pal-switch__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pal-switch__note {
  margin-top: 13px;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .pal-switch__fab-label { display: none; }       /* compact FAB on small screens */
  .pal-switch__fab { padding: 11px; }
  /* tighten the panel so the full list fits the short visible viewport */
  .pal-switch__panel { width: min(300px, calc(100vw - 20px)); padding: 13px; }
  .pal-switch__head { margin-bottom: 11px; }
  .pal-switch__modes { margin-bottom: 11px; }
  .pal-switch__grid { gap: 6px; }
  .pal-switch__item { padding: 7px 9px; }
  .pal-switch__note { margin-top: 10px; }
}
