/* Chinolor reference supplied by the user. Full palette; hex values are sRGB. */
:root {
  --palette-pearl-gray: #E4DFD7;
  --palette-cloud-gray: #617172;
  --palette-dusk-gray: #474B4C;
  --palette-leaf-red: #F07C82;
  --palette-camellia-red: #EE3F4D;
  --palette-crystal-pink: #EEA6B7;
  --palette-rhodonite-pink: #D276A3;
  --palette-hyacinth-purple: #C8ADC4;
  --palette-lupine-blue: #619AC3;
  --palette-autumn-blue: #8ABCD1;
  --palette-stone-green: #57C3C2;
  --palette-cardamom-green: #5DBE8A;
  --palette-sprout-green: #96C24E;
  --palette-honey-yellow: #F9D367;
  --palette-pineapple-red: #FC7930;
  --palette-wild-rose-red: #FB9968;
  --palette-deep-blue: #134857;
  --palette-babys-breath-purple: #2E317C;
  --palette-palm-brown: #C1651A;
  --palette-mistletoe-green: #2B312C;
  --default-text: var(--palette-pearl-gray);
  --default-background: var(--palette-dusk-gray);
}
/* Menu defaults. Document paper and saved drawing colors stay independent. */
body:not([data-theme=light]) {
  --text: var(--default-text);
  --panel: var(--default-background);
  --overlay: var(--default-background);
  --muted: color-mix(in srgb, var(--default-text) 76%, var(--default-background));
  --subtle: var(--muted);
  --menu-text: var(--default-text);
  --menu-bg: var(--default-background);
}
body .palette-popover {
  position:fixed; inset:auto; margin:0; padding:10px; width:224px;
  max-width:calc(100vw - 16px); box-sizing:border-box;
  border:1px solid var(--palette-cloud-gray); border-radius:9px;
  background:var(--default-background); color:var(--default-text);
  box-shadow:0 8px 28px #0005; font:11px/1.4 'Segoe UI',sans-serif;
}
.palette-popover::backdrop { background:transparent; }
body .palette-popover header { display:flex; align-items:center; justify-content:space-between; margin:0 0 8px; padding:0; border:0; }
body .palette-popover button { min-height:0; height:24px; padding:0; border:1px solid transparent; border-radius:4px; color:var(--default-text); background:transparent; font:inherit; cursor:pointer; }
body .palette-popover .palette-close { width:22px; font-size:17px; }
body .palette-popover .palette-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
body .palette-popover .palette-swatch { height:25px; border:1px solid #ffffff30; background:var(--swatch); position:relative; }
body .palette-popover .palette-swatch:hover { background:var(--swatch); outline:1px solid var(--default-text); outline-offset:1px; }
body .palette-popover .palette-swatch[aria-pressed=true]::after { content:''; position:absolute; inset:6px; border:1px solid white; outline:1px solid #222; border-radius:2px; }
body .palette-popover .palette-defaults { display:flex; gap:6px; margin:9px 0; }
body .palette-popover .palette-defaults button { flex:1; padding:0 5px; border-color:var(--palette-cloud-gray); height:24px; }
body .palette-popover .palette-info { display:block; height:30px; margin:8px 0 0; color:var(--default-text); font-size:10px; }
body .palette-popover .palette-custom { display:flex; align-items:center; gap:7px; margin:0; }
body .palette-popover .palette-hex { min-width:0; flex:1; width:80px; max-width:none; height:25px; padding:0 7px; border:1px solid var(--palette-cloud-gray); border-radius:4px; color:var(--default-text); background:#0002; font:11px monospace; }
body .palette-popover .palette-apply { width:26px; border-color:var(--palette-cloud-gray); }
body .palette-popover :focus-visible { outline:2px solid var(--default-text); outline-offset:2px; }