:root[data-palette="azzurro"] {
  --bg: #f4f7fa;
  --ink: #162e43;
  --muted: #526b7d;
  --line: #d9e5ee;
  --accent: #086c9c;
  --accent-fill: #299fd6;
  --on-accent: #fff;
  --accent-hover: #56b4e0;
  --accent-soft: #e7f5fc;
  --accent-border: #a8d9ef;
  --accent-on-muted: #fff;
  --surface-soft: #eaf1f6;
  --panel-bg: #f8fcff;
  --focus: #086c9c;
}
:root[data-palette="celeste"] {
  --bg: #f2f9fc;
  --ink: #153448;
  --muted: #536e80;
  --line: #d4e6ef;
  --accent: #087cac;
  --accent-hover: #06618a;
  --accent-soft: #e1f3fc;
  --accent-border: #91cce5;
  --accent-on-muted: #e2f5ff;
  --surface-soft: #e8f2f7;
  --panel-bg: #f7fcff;
  --focus: #087cac;
}
:root[data-palette="indaco"] {
  --bg: #f6f6fc;
  --ink: #262440;
  --muted: #68647f;
  --line: #e1dfef;
  --accent: #6152cb;
  --accent-hover: #4c3da8;
  --accent-soft: #efecff;
  --accent-border: #bdb3ee;
  --accent-on-muted: #f0ecff;
  --surface-soft: #efedf7;
  --panel-bg: #fbfaff;
  --focus: #6152cb;
}
:root[data-palette="petrolio"] {
  --bg: #f2f8f9;
  --ink: #17383e;
  --muted: #547078;
  --line: #d5e5e8;
  --accent: #127989;
  --accent-hover: #0d5c69;
  --accent-soft: #e1f2f4;
  --accent-border: #96cbd2;
  --accent-on-muted: #e2f8fb;
  --surface-soft: #e8f1f3;
  --panel-bg: #f8fcfd;
  --focus: #127989;
}
.navigation-bar {
  max-width: 1440px;
  margin: auto;
  padding-inline: clamp(16px, 3.5vw, 48px);
  display: flex;
  align-items: center;
  gap: 18px;
}
.navigation-bar nav { flex: 1; min-width: 0; padding: 0; margin: 0; }
.palette-picker { position: relative; flex-shrink: 0; }
#paletteToggle { font-size: 12px; min-height: 40px; padding: 8px 11px; margin-bottom: 5px; }
#paletteName { color: var(--accent); }
.palette-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent-fill); }
#palettePanel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(300px, calc(100vw - 32px));
  padding: 16px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 36px #15243d20;
  z-index: 6;
}
#palettePanel h2 { font-size: 15px; margin-bottom: 12px; }
#paletteOptions { display: grid; gap: 6px; }
.palette-option {
  width: 100%;
  justify-content: flex-start;
  min-height: 58px;
  padding: 10px;
  gap: 12px;
  text-align: left;
  background: white;
}
.palette-option[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-border); }
.palette-swatches { display: flex; flex-shrink: 0; }
.palette-swatches i { width: 17px; height: 27px; background: var(--swatch); }
.palette-swatches i:first-child { border-radius: 5px 0 0 5px; }
.palette-swatches i:last-child { border-radius: 0 5px 5px 0; }
.palette-option strong { display: block; font-size: 13px; }
.palette-option small { display: block; font-size: 11px; font-weight: 400; }
.palette-check { margin-left: auto; color: var(--accent); }
#paletteStatus { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 12px; }
@media (max-width: 540px) {
  .navigation-bar { padding-inline: 16px; gap: 10px; }
  #paletteName { display: none; }
  #paletteToggle { padding-inline: 9px; }
}
@media print { .navigation-bar { display: none; } }