/* Paleta pessoal: tons derivados das 5 cores-base (--paper, --ink, --red, --green, --gold),
   definidas por pessoa em <style id="user-palette">. Só vale quando <html> tem .has-palette. */
:root.has-palette {
  --paper-light: color-mix(in srgb, var(--paper) 55%, #ffffff);
  --paper-deep: color-mix(in srgb, var(--paper) 91%, var(--ink));
  --ink-soft: color-mix(in srgb, var(--ink) 82%, var(--paper));
  --muted: color-mix(in srgb, var(--ink) 66%, var(--paper));
  --line: color-mix(in srgb, var(--ink) 19%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 56%, transparent);
  --on-green: var(--paper-light);
}
:root.has-palette[data-theme="dark"] {
  --paper-light: color-mix(in srgb, var(--paper) 93%, #ffffff);
  --paper-deep: color-mix(in srgb, var(--paper) 86%, #ffffff);
  --ink-soft: color-mix(in srgb, var(--ink) 85%, var(--paper));
  --muted: color-mix(in srgb, var(--ink) 70%, var(--paper));
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 50%, transparent);
  --on-green: var(--ink);
}
:root.has-palette .site-header,
:root.has-palette[data-theme="dark"] .site-header { background: color-mix(in srgb, var(--paper) 95%, transparent); }
:root.has-palette .modal-close { background: color-mix(in srgb, var(--paper-light) 96%, transparent); }
:root.has-palette ::selection { background: color-mix(in srgb, var(--red) 24%, var(--paper)); }

/* Seção "Cores do site" no perfil */
.palette-panel { margin: 48px 0 24px; padding: clamp(20px, 4vw, 34px); border: 1px solid var(--line-strong); background: var(--paper-light); }
.palette-panel h2 { margin: 0 0 6px; font: 500 clamp(30px, 5vw, 44px)/1 var(--serif); letter-spacing: -.03em; }
.palette-panel > p { margin: 0 0 20px; color: var(--muted); }
.palette-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.palette-preset { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; text-align: left; font: 600 12px/1.2 var(--sans); }
.palette-preset:hover { border-color: var(--line-strong); }
.palette-preset.is-active { border-color: var(--red); box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 30%, transparent); }
.palette-swatches { display: flex; height: 26px; overflow: hidden; border-radius: 4px; border: 1px solid var(--line); }
.palette-swatches i { flex: 1; }
.palette-swatches i:first-child { flex: 2; }
.palette-custom { margin-top: 18px; }
.palette-custom summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.palette-custom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 14px; }
.palette-custom-grid fieldset { margin: 0; padding: 14px; border: 1px solid var(--line); }
.palette-custom-grid legend { padding: 0 6px; font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.palette-custom-grid label { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13px; }
.palette-custom-grid input[type="color"] { width: 46px; height: 32px; padding: 0; border: 1px solid var(--line-strong); background: none; cursor: pointer; }
.palette-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; align-items: center; }
.palette-actions small { color: var(--muted); }
@media (max-width: 620px) { .palette-custom-grid { grid-template-columns: 1fr; } }