/* Kleurpaletten (27 september 2026, gebruikerskeuze met voorbeeldfoto's): Duin, Gracht, Delfts, Heide.
   Ontworpen in OKLCH (Summa-archief/2026-09-27-summa33-paletten-kav912/ontwerp.py): neutrale vlakken met een
   lichte tint, een rijke inktkleur (ook de kopband op mobiel) en één accent buiten het rood/oranje/groen van
   te laat, aandacht en klaar. Die signaalkleuren staan in design.css en blijven in elk palet gelijk.
   --band-deep: de kopband in donker, in de kleur van het palet en nog steeds het donkerste vlak.
   Duin is de standaard (ook zonder data-palette); oude keuzes zet appearance.js om. */
:root[data-palette="duin"], :root:not([data-palette]) {
  --canvas: #f9f5ee;
  --paper: #fefdfa;
  --surface-soft: #f1ede4;
  --hover: #eae5da;
  --ink: #2c302f;
  --muted: #6b6455;
  --line: #e1ddd3;
  --accent: #2c302f;
  --accent-hover: #1b1f1e;
  --accent-soft: #f2ecdf;
  --hero-paper: #e4dfd4;
  --hero-ink: #2c302f;
  --chart-bar: #c3bdb1;
  --navy: #2c302f;
  --navy-soft: #1b1f1e;
}
:root[data-palette="duin"][data-theme="dark"], :root:not([data-palette])[data-theme="dark"] {
  --canvas: #191713;
  --paper: #23211d;
  --surface-soft: #2f2c27;
  --hover: #393631;
  --ink: #f2f0ea;
  --muted: #b9b5ad;
  --line: #44423c;
  --accent: #e2ded4;
  --accent-hover: #f4f1ec;
  --accent-soft: #33302a;
  --hero-paper: #302d27;
  --hero-ink: #f3f0e9;
  --chart-bar: #6c6961;
  --navy: #6c6961;
  --navy-soft: #5e5a53;
  --band-deep: #12100c;
}
@media (prefers-color-scheme: dark) {
:root[data-palette="duin"]:not([data-theme="light"]), :root:not([data-palette]):not([data-theme="light"]) {
  --canvas: #191713;
  --paper: #23211d;
  --surface-soft: #2f2c27;
  --hover: #393631;
  --ink: #f2f0ea;
  --muted: #b9b5ad;
  --line: #44423c;
  --accent: #e2ded4;
  --accent-hover: #f4f1ec;
  --accent-soft: #33302a;
  --hero-paper: #302d27;
  --hero-ink: #f3f0e9;
  --chart-bar: #6c6961;
  --navy: #6c6961;
  --navy-soft: #5e5a53;
  --band-deep: #12100c;
}
}
:root[data-palette="gracht"] {
  --canvas: #f2f7f7;
  --paper: #fcfdfe;
  --surface-soft: #e9eeef;
  --hover: #e0e7e7;
  --ink: #0f2d2e;
  --muted: #5b6868;
  --line: #d8dede;
  --accent: #046a6b;
  --accent-hover: #015455;
  --accent-soft: #dff1f0;
  --hero-paper: #d0e5e4;
  --hero-ink: #0f2d2e;
  --chart-bar: #aac4c3;
  --navy: #046a6b;
  --navy-soft: #015455;
}
:root[data-palette="gracht"][data-theme="dark"] {
  --canvas: #0d1a1a;
  --paper: #162525;
  --surface-soft: #203030;
  --hover: #293a3a;
  --ink: #e9f2f2;
  --muted: #a6baba;
  --line: #354646;
  --accent: #99cccc;
  --accent-hover: #bbe0e0;
  --accent-soft: #1d3434;
  --hero-paper: #1f3333;
  --hero-ink: #e9f2f2;
  --chart-bar: #557272;
  --navy: #017273;
  --navy-soft: #026061;
  --band-deep: #001819;
}
@media (prefers-color-scheme: dark) {
:root[data-palette="gracht"]:not([data-theme="light"]) {
  --canvas: #0d1a1a;
  --paper: #162525;
  --surface-soft: #203030;
  --hover: #293a3a;
  --ink: #e9f2f2;
  --muted: #a6baba;
  --line: #354646;
  --accent: #99cccc;
  --accent-hover: #bbe0e0;
  --accent-soft: #1d3434;
  --hero-paper: #1f3333;
  --hero-ink: #e9f2f2;
  --chart-bar: #557272;
  --navy: #017273;
  --navy-soft: #026061;
  --band-deep: #001819;
}
}
:root[data-palette="delfts"] {
  --canvas: #f3f6fa;
  --paper: #fcfdff;
  --surface-soft: #eaedf3;
  --hover: #e1e6ec;
  --ink: #142246;
  --muted: #5c6577;
  --line: #d9dde3;
  --accent: #2b50a6;
  --accent-hover: #193b90;
  --accent-soft: #e4edfe;
  --hero-paper: #d3e0fa;
  --hero-ink: #142246;
  --chart-bar: #aebedd;
  --navy: #2b50a6;
  --navy-soft: #193b90;
}
:root[data-palette="delfts"][data-theme="dark"] {
  --canvas: #101725;
  --paper: #1a2132;
  --surface-soft: #242c3e;
  --hover: #2d3649;
  --ink: #edf0f7;
  --muted: #afb6c4;
  --line: #384255;
  --accent: #a4c1fc;
  --accent-hover: #c4d8ff;
  --accent-soft: #232f47;
  --hero-paper: #242f45;
  --hero-ink: #edf0f7;
  --chart-bar: #5b6c8e;
  --navy: #375eb5;
  --navy-soft: #294da3;
  --band-deep: #020c31;
}
@media (prefers-color-scheme: dark) {
:root[data-palette="delfts"]:not([data-theme="light"]) {
  --canvas: #101725;
  --paper: #1a2132;
  --surface-soft: #242c3e;
  --hover: #2d3649;
  --ink: #edf0f7;
  --muted: #afb6c4;
  --line: #384255;
  --accent: #a4c1fc;
  --accent-hover: #c4d8ff;
  --accent-soft: #232f47;
  --hero-paper: #242f45;
  --hero-ink: #edf0f7;
  --chart-bar: #5b6c8e;
  --navy: #375eb5;
  --navy-soft: #294da3;
  --band-deep: #020c31;
}
}
:root[data-palette="heide"] {
  --canvas: #faf5f0;
  --paper: #fffdfb;
  --surface-soft: #f3ece5;
  --hover: #ece3dc;
  --ink: #321b35;
  --muted: #6f6256;
  --line: #e3dbd5;
  --accent: #7a3f84;
  --accent-hover: #652b6f;
  --accent-soft: #f6e7f8;
  --hero-paper: #ead9ed;
  --hero-ink: #321b35;
  --chart-bar: #cbb5ce;
  --navy: #7a3f84;
  --navy-soft: #652b6f;
}
:root[data-palette="heide"][data-theme="dark"] {
  --canvas: #1c141d;
  --paper: #271e29;
  --surface-soft: #332834;
  --hover: #3d323f;
  --ink: #f3eef4;
  --muted: #bdb1be;
  --line: #493d4a;
  --accent: #d9b1df;
  --accent-hover: #eaccee;
  --accent-soft: #39283b;
  --hero-paper: #38293a;
  --hero-ink: #f3eef4;
  --chart-bar: #7a627d;
  --navy: #84488d;
  --navy-soft: #73387c;
  --band-deep: #1c0620;
}
@media (prefers-color-scheme: dark) {
:root[data-palette="heide"]:not([data-theme="light"]) {
  --canvas: #1c141d;
  --paper: #271e29;
  --surface-soft: #332834;
  --hover: #3d323f;
  --ink: #f3eef4;
  --muted: #bdb1be;
  --line: #493d4a;
  --accent: #d9b1df;
  --accent-hover: #eaccee;
  --accent-soft: #39283b;
  --hero-paper: #38293a;
  --hero-ink: #f3eef4;
  --chart-bar: #7a627d;
  --navy: #84488d;
  --navy-soft: #73387c;
  --band-deep: #1c0620;
}
}

:root[data-palette] { --focus: var(--accent); --studio-hero: var(--navy); --studio-hero-end: var(--navy); }
.appearance-panel .settings-panel-body { padding-top: 24px; }
.appearance-panel .theme-setting { padding: 0 0 26px; margin: 0 0 26px; border-bottom: 1px solid var(--line); }
.appearance-panel .setting-label small { display: block; margin-top: 7px; color: var(--muted); }
.appearance-panel h3 { font-size: 15px; margin: 0 0 7px; }
.appearance-intro { color: var(--muted); font-size: 13px; margin: 0 0 22px; line-height: 1.6; }
/* Kleurkiezer (27 sep 2026): vier kaarten, elk met een klein voorbeeld in de eigen kleuren van het palet
   (kopband, kaart, tekst en knop), in de gekozen weergave (licht of donker). */
.palette-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; max-width: 640px; }
.palette-card { display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 8px 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); text-align: left; }
.palette-card:hover { background: var(--paper); border-color: var(--accent); }
.palette-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.palette-preview { position: relative; display: block; height: 84px; overflow: hidden; border-radius: 9px; background: var(--sample-canvas); }
.palette-preview-band { position: absolute; inset: 0 0 auto; display: grid; align-content: start; gap: 5px; height: 46px; padding: 11px 11px 0; background: var(--sample-band); }
.palette-preview-band i { display: block; width: 58%; height: 5px; border-radius: 3px; background: var(--sample-band-ink); }
.palette-preview-band i + i { width: 34%; opacity: .45; }
.palette-preview-card { position: absolute; inset: 30px 9px -6px; display: grid; align-content: start; gap: 6px; padding: 10px 10px 0; border: 1px solid var(--sample-line); border-radius: 8px; background: var(--sample-paper); }
.palette-preview-card i { display: block; width: 62%; height: 5px; border-radius: 3px; background: var(--sample-ink); }
.palette-preview-card i + i { width: 42%; background: var(--sample-muted); }
.palette-preview-card b { position: absolute; top: 9px; right: 9px; width: 24px; height: 13px; border-radius: 999px; background: var(--sample-button); }
.palette-heading { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin: 11px 3px 2px; }
.palette-heading strong { font-size: 14px; font-weight: 600; }
.palette-check { visibility: hidden; color: var(--accent); font-size: 17px; line-height: 20px; }
[aria-pressed="true"] > .palette-heading .palette-check { visibility: visible; }
.palette-description { margin: 0 3px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.appearance-status { font-size: 12px; color: var(--muted); min-height: 20px; margin: 22px 0 0; }
.appearance-status.is-error { color: var(--danger); }
.appearance-panel .theme-switch { flex-shrink: 0; }
.appearance-panel .theme-switch button.is-active { background: var(--navy); color: #fff; }
.brand-symbol { width: 34px; height: 34px; flex-shrink: 0; object-fit: contain; }
.modern-brand .brand-symbol { width: 28px; height: 28px; }
@media (min-width:721px) { #todayView .modern-topbar .modern-brand .brand-symbol { display:none; } }
@media (max-width:720px) {
  .appearance-panel .theme-setting { align-items: stretch; flex-direction: column; gap: 18px; }
  .appearance-panel .theme-switch { width: 100%; }
}
@media (max-width:359px) { .palette-grid { gap: 10px; } .palette-preview { height: 76px; } }

.palette-card[data-palette="duin"] { --sample-canvas: #f9f5ee; --sample-band: #2c302f; --sample-band-ink: #fefdfa; --sample-paper: #fefdfa; --sample-line: #e1ddd3; --sample-ink: #2c302f; --sample-muted: #6b6455; --sample-button: #2c302f; }
:root[data-theme="dark"] .palette-card[data-palette="duin"] { --sample-canvas: #191713; --sample-band: #12100c; --sample-band-ink: #f2f0ea; --sample-paper: #23211d; --sample-line: #44423c; --sample-ink: #f2f0ea; --sample-muted: #b9b5ad; --sample-button: #6c6961; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .palette-card[data-palette="duin"] { --sample-canvas: #191713; --sample-band: #12100c; --sample-band-ink: #f2f0ea; --sample-paper: #23211d; --sample-line: #44423c; --sample-ink: #f2f0ea; --sample-muted: #b9b5ad; --sample-button: #6c6961; } }
.palette-card[data-palette="gracht"] { --sample-canvas: #f2f7f7; --sample-band: #0f2d2e; --sample-band-ink: #fcfdfe; --sample-paper: #fcfdfe; --sample-line: #d8dede; --sample-ink: #0f2d2e; --sample-muted: #5b6868; --sample-button: #046a6b; }
:root[data-theme="dark"] .palette-card[data-palette="gracht"] { --sample-canvas: #0d1a1a; --sample-band: #001819; --sample-band-ink: #e9f2f2; --sample-paper: #162525; --sample-line: #354646; --sample-ink: #e9f2f2; --sample-muted: #a6baba; --sample-button: #017273; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .palette-card[data-palette="gracht"] { --sample-canvas: #0d1a1a; --sample-band: #001819; --sample-band-ink: #e9f2f2; --sample-paper: #162525; --sample-line: #354646; --sample-ink: #e9f2f2; --sample-muted: #a6baba; --sample-button: #017273; } }
.palette-card[data-palette="delfts"] { --sample-canvas: #f3f6fa; --sample-band: #142246; --sample-band-ink: #fcfdff; --sample-paper: #fcfdff; --sample-line: #d9dde3; --sample-ink: #142246; --sample-muted: #5c6577; --sample-button: #2b50a6; }
:root[data-theme="dark"] .palette-card[data-palette="delfts"] { --sample-canvas: #101725; --sample-band: #020c31; --sample-band-ink: #edf0f7; --sample-paper: #1a2132; --sample-line: #384255; --sample-ink: #edf0f7; --sample-muted: #afb6c4; --sample-button: #375eb5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .palette-card[data-palette="delfts"] { --sample-canvas: #101725; --sample-band: #020c31; --sample-band-ink: #edf0f7; --sample-paper: #1a2132; --sample-line: #384255; --sample-ink: #edf0f7; --sample-muted: #afb6c4; --sample-button: #375eb5; } }
.palette-card[data-palette="heide"] { --sample-canvas: #faf5f0; --sample-band: #321b35; --sample-band-ink: #fffdfb; --sample-paper: #fffdfb; --sample-line: #e3dbd5; --sample-ink: #321b35; --sample-muted: #6f6256; --sample-button: #7a3f84; }
:root[data-theme="dark"] .palette-card[data-palette="heide"] { --sample-canvas: #1c141d; --sample-band: #1c0620; --sample-band-ink: #f3eef4; --sample-paper: #271e29; --sample-line: #493d4a; --sample-ink: #f3eef4; --sample-muted: #bdb1be; --sample-button: #84488d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .palette-card[data-palette="heide"] { --sample-canvas: #1c141d; --sample-band: #1c0620; --sample-band-ink: #f3eef4; --sample-paper: #271e29; --sample-line: #493d4a; --sample-ink: #f3eef4; --sample-muted: #bdb1be; --sample-button: #84488d; } }

/* The supplied mark keeps its transparent O; inverse ink preserves contrast on dark surfaces. */
.brand-symbol { filter: none; }
:root[data-theme="dark"] .brand-symbol { filter: invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-symbol { filter: invert(1); }
}