/* Shared component tokens. Every surface uses the selected event palette. */
body[data-theme=standaard]{--surface:#faf7ef;--surface-raised:#fffdf8;--surface-soft:#eee7dc;--surface-media:#f1ebe1;--surface-ink:#492734;--surface-muted:#72545e;--surface-line:#cebaa1;--surface-accent:#63283e;--surface-on-accent:#fff9ed;--surface-strong:#592437;--surface-on-strong:#fff5e6;--surface-highlight:#e5cca0;--surface-radius:5px;--surface-small-radius:3px;--surface-shadow:none;--surface-heading:DM,Arial,sans-serif}
body[data-theme=kerst]{--surface:#faf3e3;--surface-raised:#fffaf0;--surface-soft:#eee4cc;--surface-media:#f1e8d4;--surface-ink:#254632;--surface-muted:#745c3d;--surface-line:#bea16c;--surface-accent:#254c37;--surface-on-accent:#fff7e3;--surface-strong:#1d3c2c;--surface-on-strong:#fff4dc;--surface-highlight:#e3c790;--surface-radius:3px;--surface-small-radius:2px;--surface-shadow:0 12px 32px #2d0b1424;--surface-heading:Cormorant,Georgia,serif}
body[data-theme=sinterklaas]{--surface:#fffdfb;--surface-raised:#fff;--surface-soft:#fff8f3;--surface-media:#faf3ef;--surface-ink:#7d1a16;--surface-muted:#82524b;--surface-line:#dcc5a5;--surface-accent:#a20b06;--surface-on-accent:#fff;--surface-strong:#a20b06;--surface-on-strong:#fff;--surface-highlight:#f4d99e;--surface-radius:22px;--surface-small-radius:12px;--surface-shadow:0 6px 20px #631a2820;--surface-heading:DM,Arial,sans-serif}
body[data-theme=vrienden]{--surface:#fffcff;--surface-raised:#fff;--surface-soft:#eee2f5;--surface-media:#f3ded4;--surface-ink:#503260;--surface-muted:#745780;--surface-line:#c9b3d6;--surface-accent:#67467f;--surface-on-accent:#fff;--surface-strong:#e9dcf1;--surface-on-strong:#503260;--surface-highlight:#efd1bf;--surface-radius:24px;--surface-small-radius:14px;--surface-shadow:0 5px 0 #dac9e733;--surface-heading:DM,Arial,sans-serif}

/* Opened draw, personal note, recipient wishes and own wishes. */
body[data-theme] #revealed-letter{background:var(--surface);color:var(--surface-ink);border:1px solid var(--surface-line);border-radius:var(--surface-radius);box-shadow:var(--surface-shadow)}
body[data-theme] #revealed-letter:before{border-color:var(--surface-line);opacity:.35}
body[data-theme] #revealed-letter .letter-top{background:var(--surface-strong);border:1px solid var(--surface-line);color:var(--surface-on-strong);border-radius:var(--surface-small-radius)}
body[data-theme] #revealed-letter .letter-top :is(.eyebrow,.close-letter){color:var(--surface-on-strong)}
body[data-theme] #revealed-letter .recipient{border-color:var(--surface-line)}
body[data-theme] #revealed-letter :is(.recipient h2,.wishes-heading h3){color:var(--surface-ink)}
body[data-theme] #revealed-letter :is(.recipient>p,.recipient-meta,.price-status,.letter-footer){color:var(--surface-muted)}
body[data-theme] #revealed-letter .recipient-meta>span:last-child{background:var(--surface-soft);border-color:var(--surface-line);color:var(--surface-ink);border-radius:var(--surface-small-radius)}
body[data-theme] #revealed-letter .letter-note{background:var(--surface-soft);border-color:var(--surface-line);border-left-color:var(--surface-accent);border-radius:var(--surface-small-radius)}
body[data-theme] #revealed-letter .letter-note :is(span,p,.text-link){color:var(--surface-ink)}
body[data-theme] :is(#own-wishes,#recipient-wishes) .wish-card{background:var(--surface-raised);color:var(--surface-ink);border:1px solid var(--surface-line);border-radius:var(--surface-radius);box-shadow:var(--surface-shadow)}
body[data-theme] :is(#own-wishes,#recipient-wishes) .wish-card:hover{border-color:var(--surface-accent)}
body[data-theme] :is(#own-wishes,#recipient-wishes,#wish-detail-dialog) .product-art{background:var(--surface-media);color:var(--surface-muted)}
body[data-theme] :is(#own-wishes,#recipient-wishes,#wish-detail-dialog) .priority{background:var(--surface-accent);border-color:var(--surface-accent);color:var(--surface-on-accent);border-radius:var(--surface-small-radius)}
body[data-theme] :is(#own-wishes,#recipient-wishes,#wish-detail-dialog) :is(h4,.price,.wish-edit){color:var(--surface-ink)}
body[data-theme] :is(#own-wishes,#recipient-wishes,#wish-detail-dialog) :is(small,.checked,.wish-notes){color:var(--surface-muted)}
body[data-theme] :is(#own-wishes,#recipient-wishes,#wish-detail-dialog) .priority{color:var(--surface-on-accent)}
body[data-theme] :is(#own-wishes,#recipient-wishes) .wish-actions{border-color:var(--surface-line)}
body[data-theme] :is(#own-wishes,#recipient-wishes,#wish-detail-dialog) .shop-button{background:var(--surface-accent);color:var(--surface-on-accent);border-color:var(--surface-accent);border-radius:var(--surface-small-radius)}
body[data-theme] #wensen .wishlist-toolbar{background:var(--surface-soft);border-color:var(--surface-line);border-radius:var(--surface-radius)}
body[data-theme] #wensen .wishlist-toolbar .price-status{color:var(--surface-ink)}
body[data-theme] #wensen #add-wish{background:var(--surface-accent);color:var(--surface-on-accent);border-color:var(--surface-accent);border-radius:var(--surface-small-radius)}
body[data-theme] :is(#own-wishes,#recipient-wishes) .empty-wishes,body[data-theme] :is(#draw-waiting,#messages-waiting){background:var(--surface-soft);color:var(--surface-ink);border:1px solid var(--surface-line);border-radius:var(--surface-radius);box-shadow:var(--surface-shadow)}
body[data-theme] :is(#own-wishes,#recipient-wishes) .empty-wishes :is(h3,p),body[data-theme] :is(#draw-waiting,#messages-waiting) :is(h2,p,span){color:var(--surface-ink)}
body[data-theme] :is(#own-wishes,#recipient-wishes) .empty-wishes .button{background:var(--surface-accent);color:var(--surface-on-accent);border-radius:var(--surface-small-radius)}
body[data-theme=standaard] #revealed-letter .letter-top{background:var(--surface);border:0;border-bottom:1px solid var(--surface-line);border-radius:0}
body[data-theme=standaard] #revealed-letter .letter-top :is(.eyebrow,.close-letter){color:var(--surface-ink)}
body[data-theme=sinterklaas] #revealed-letter .recipient h2{font-family:var(--surface-heading);font-weight:500;font-size:clamp(38px,6vw,68px)}
body[data-theme=sinterklaas] #revealed-letter .letter-note>p,body[data-theme=vrienden] #revealed-letter .letter-note>p{font:14px/1.8 DM,Arial,sans-serif}
body[data-theme=vrienden] #revealed-letter .recipient-meta>span:last-child{background:#e5efd9;color:#36533d;border-color:#bdcfae}
body[data-theme=vrienden] #revealed-letter .letter-note{background:#fbe7dd}
body:not([data-theme=kerst]) #revealed-letter:before{display:none}
body[data-theme=standaard] :is(#own-wishes,#recipient-wishes) h4{font:500 19px/1.35 DM,Arial,sans-serif}
body[data-theme=sinterklaas] :is(#own-wishes,#recipient-wishes) h4,body[data-theme=vrienden] :is(#own-wishes,#recipient-wishes) h4{font:500 20px/1.35 DM,Arial,sans-serif}
/* The reveal props retain their own shapes; only leftover lettering is recoloured. */
body:not([data-theme=sinterklaas]) .envelope .ticket{background:var(--surface-raised);color:var(--surface-ink)}
body[data-theme] .envelope-inscription{color:var(--surface-ink)}
body[data-theme] .home-ticket{background:var(--surface);color:var(--surface-ink);border-color:var(--surface-line)}
body[data-theme] .home-ticket :is(h2,p,em){color:var(--surface-ink)}

/* Organizer panels, controls and preview containers. */
body[data-theme] #organiseren .admin-paper{background:var(--surface);color:var(--surface-ink);border:1px solid var(--surface-line);border-radius:var(--surface-radius);box-shadow:var(--surface-shadow)}
body[data-theme] #organiseren .admin-paper :is(h2,.eyebrow,label,legend){color:var(--surface-ink)}
body[data-theme] #organiseren .admin-paper :is(p:not(.eyebrow),.member-row small,.member-status,.field-note,.text-link),body[data-theme] #exclusions-list small{color:var(--surface-muted)}
body[data-theme] #organiseren .member-initial{background:var(--surface-accent);color:var(--surface-on-accent)}
body[data-theme] #organiseren :is(.member-row,.exclusion-row,.settings-actions){border-color:var(--surface-line)}
body[data-theme] #organiseren .exclusion-row button{color:var(--surface-accent)}
body[data-theme] #organiseren .admin-paper .button{background:var(--surface-accent);color:var(--surface-on-accent);border-color:var(--surface-accent);border-radius:var(--surface-small-radius)}
body[data-theme] #organiseren .admin-paper .reset-all-button{background:var(--surface-soft);color:var(--surface-ink);border-color:var(--surface-line)}
body[data-theme] #settings-form .settings-fields :is(input:not([type=radio]),select),body[data-theme] #organiseren .admin-paper :is(select,input:not([type=radio]):not([type=checkbox])){background:var(--surface-raised);color:var(--surface-ink);border-color:var(--surface-line);border-radius:var(--surface-small-radius)}
body[data-theme] #settings-form :is(.theme-choice,.voice-options>label){background:var(--surface);border-color:var(--surface-line);border-radius:var(--surface-small-radius)}
body[data-theme] #settings-form :is(.theme-choice,.voice-options>label):has(input:checked){background:var(--surface-soft);border-color:var(--surface-accent);outline-color:var(--surface-accent)}
body[data-theme] #settings-form :is(.theme-choice small,.voice-options small){color:var(--surface-muted)}
body[data-theme] #settings-form input[type=radio]{accent-color:var(--surface-accent)}
/* Preview belongs to the pending theme, not the surrounding saved theme. */
body[data-theme] #organiseren #settings-form .settings-preview :is(p,h3){color:inherit}
body[data-theme] #organiseren .admin-summary{background:var(--surface-strong);color:var(--surface-on-strong);border-color:var(--surface-line);border-radius:var(--surface-radius)}
body[data-theme] #organiseren .admin-summary :is(small,.draw-action>span){color:var(--surface-on-strong)}
body[data-theme] #organiseren .admin-summary .button{background:var(--surface-highlight);color:var(--surface-ink);border-color:var(--surface-highlight);border-radius:var(--surface-small-radius)}

/* Every dialog and account menu, including login, privacy and wish details. */
body[data-theme] :is(dialog,#account-menu){background:var(--surface);color:var(--surface-ink);border-color:var(--surface-line);border-radius:var(--surface-radius);box-shadow:0 20px 65px #160e2038}
body[data-theme] :is(dialog,#account-menu) :is(h2,h2 em,h3,.eyebrow,.dialog-close,label){color:var(--surface-ink)}
body[data-theme] :is(dialog,#account-menu) :is(p,.field-note,.account-email,.lookup-status,.privacy-intro,.privacy-sections p,.privacy-bottom,.checked,.price-status){color:var(--surface-muted)}
body[data-theme] :is(dialog,#account-menu) :is(.text-link,.privacy-bottom a,.privacy-sections h3){color:var(--surface-accent)}
body[data-theme] :is(dialog,#account-menu) :is(input,textarea,select){background:var(--surface-raised);border-color:var(--surface-line);color:var(--surface-ink);border-radius:var(--surface-small-radius)}
body[data-theme] :is(dialog,#account-menu) input[readonly]{background:var(--surface-soft)}
body[data-theme] :is(dialog,#account-menu) :is(input,textarea)::placeholder{color:var(--surface-muted);opacity:1}
body[data-theme] :is(dialog,#account-menu) .button,body[data-theme] #wish-form .button.wine{background:var(--surface-accent);color:var(--surface-on-accent);border-color:var(--surface-accent);border-radius:var(--surface-small-radius)}
body[data-theme] #wish-dialog .photo-picker{background:var(--surface-soft);color:var(--surface-ink);border-color:var(--surface-line);border-radius:var(--surface-small-radius)}
body[data-theme] :is(#wish-photo-preview,.wish-photo-preview){background:var(--surface-media);color:var(--surface-muted);border-radius:var(--surface-small-radius)}
body[data-theme] #profile-dialog #password-form{background:var(--surface-strong);color:var(--surface-on-strong)}
body[data-theme] #profile-dialog #password-form :is(h2,p,label,.eyebrow,.field-note,#copy-recovery){color:var(--surface-on-strong)}
body[data-theme] #profile-dialog #password-form .button{background:var(--surface-highlight);color:var(--surface-ink)}
body[data-theme] #profile-dialog #cleanup-photos{background:var(--surface-soft);color:var(--surface-ink);border-color:var(--surface-line)}
body[data-theme] #privacy-dialog :is(.privacy-intro,.privacy-bottom){border-color:var(--surface-line)}
body[data-theme] #account-menu :is(a,button){color:var(--surface-ink);border-color:var(--surface-line)}
body[data-theme] #account-menu>small{color:var(--surface-muted)}
body[data-theme] #account-menu :is(a,button):hover{background:var(--surface-soft);color:var(--surface-accent)}
body[data-theme] :is(#toast,#connection-status){background:var(--surface-soft);color:var(--surface-ink);border-color:var(--surface-line);border-radius:var(--surface-small-radius)}
body[data-theme] #toast button{color:var(--surface-accent)}
body[data-theme] :is(dialog,#organiseren) :is(input,select,textarea,button,a):focus-visible{outline-color:var(--surface-accent)}
body[data-theme] .wish-card-hit:focus-visible{outline-color:var(--surface-accent)}
body[data-theme] #privacy-dialog .privacy-sections h3{color:var(--surface-accent)}
body[data-theme] #privacy-dialog .privacy-sections p{color:var(--surface-muted)}
body[data-theme] #privacy-dialog .dialog-heading .eyebrow{color:var(--surface-accent)}

/* The name-protection warning follows the palette too. */
body[data-theme] :is(#name-warning-dialog,#family-name-dialog).secret-popup{background:var(--surface);color:var(--surface-ink);border-color:var(--surface-line);border-radius:var(--surface-radius);box-shadow:0 20px 65px #160e2038}
body[data-theme] :is(#name-warning-dialog,#family-name-dialog).secret-popup :is(h2,h2 em,.secret-eyebrow){color:var(--surface-ink)}
body[data-theme] :is(#name-warning-dialog,#family-name-dialog).secret-popup :is(.secret-description,.secret-footnote){color:var(--surface-muted)}
body[data-theme] :is(#name-warning-dialog,#family-name-dialog) .secret-delete{background:var(--surface-accent);color:var(--surface-on-accent);border-color:var(--surface-accent);border-radius:var(--surface-small-radius)}
body[data-theme] :is(#name-warning-dialog,#family-name-dialog) :is(.secret-edit,.secret-close){background:var(--surface-soft);color:var(--surface-ink);border-color:var(--surface-line)}
body[data-theme] .secret-emblem .secret-seal{background:var(--surface-accent);border-color:var(--surface-line);box-shadow:none}
body[data-theme] .secret-seal svg{stroke:var(--surface-on-accent)}
body:not([data-theme=kerst]) .secret-popup :is(.secret-orbit,.secret-spark),body:not([data-theme=kerst]) .secret-popup:before,body:not([data-theme=kerst]) .secret-emblem:before,body:not([data-theme=kerst]) .secret-delete:after{display:none}
body[data-theme=standaard] .secret-popup .secret-emblem{height:75px;width:75px}
body[data-theme=standaard] .secret-popup *,body[data-theme=standaard] .secret-popup{animation:none!important}
body[data-theme=sinterklaas] .secret-emblem .secret-seal,body[data-theme=vrienden] .secret-emblem .secret-seal{border-radius:20px}
body[data-theme=sinterklaas] :is(dialog,#account-menu) h2,body[data-theme=vrienden] :is(dialog,#account-menu) h2{font-family:var(--surface-heading);font-size:30px;font-weight:500;line-height:1.2;letter-spacing:-.7px}
body[data-theme=standaard] :is(dialog,#account-menu) h2{font:500 25px/1.3 DM,Arial,sans-serif;letter-spacing:-.4px}
body:not([data-theme=kerst]) .christmas-note:after,body:not([data-theme=kerst]) .christmas-note:before{display:none}
@media(max-width:620px){body[data-theme=sinterklaas] :is(dialog,#account-menu) h2,body[data-theme=vrienden] :is(dialog,#account-menu) h2{font-size:26px}}
/* Keep the full-card hit target accessible without drawing its label over the card. */
.wish-card-hit{font-size:0}
/* Sint reference: deep scarlet, white paper, gold as fine trim and lettering. */
body[data-theme=sinterklaas]{--wine:#a20b06;--deep:#790602;--gold:#efbf47;--red-panel-background:#a20b06;background:#920600;background-image:radial-gradient(ellipse at 50% 0,#bd1a0f30,transparent 70%);color:#fffaf4}
body[data-theme=sinterklaas] .header{border-color:#e6b94e55}
body[data-theme=sinterklaas] :is(.brand em,.brand-gift){color:#f3cb67}
body[data-theme=sinterklaas] .avatar{background:#fffaf4;border-color:#e6b94e;color:#8e100b}
body[data-theme=sinterklaas] .tabs{background:#83060033;border-color:#dca62e66}
body[data-theme=sinterklaas] .tabs a[aria-current]{color:#f9d888}
body[data-theme=sinterklaas] .tabs a[aria-current]:after{background:#e7b332;height:3px}
body[data-theme=sinterklaas] .welcome,body[data-theme=sinterklaas] :is(#lootje,#wensen,#berichten,#organiseren)>.page-title{background:#a20b06;border-color:#dca62e;border-radius:18px}
body[data-theme=sinterklaas] .welcome h1 em,body[data-theme=sinterklaas] :is(#lootje,#wensen,#berichten,#organiseren)>.page-title h1 em{color:#f4c84f}
body[data-theme=sinterklaas] .welcome .eyebrow,body[data-theme=sinterklaas] :is(#lootje,#wensen,#berichten,#organiseren)>.page-title .eyebrow{color:#f2d99c}
body[data-theme=sinterklaas] .button.gold{background:#fffaf4;color:#8e100b;border-color:#e1b74d}
body[data-theme=sinterklaas] .tile-wine{background:#a20b06;border-color:#dca62e}
body[data-theme=sinterklaas] :is(.tile-paper,.tile-plum){background:#fffdfb;color:#7d1a16;border-color:#dcc5a5}
body[data-theme=sinterklaas] :is(.tile-paper,.tile-plum) :is(h2,p,.tile-link,.tile-icon){color:#7d1a16}
body[data-theme=sinterklaas] .tile-paper .badge{background:#fff8ed;color:#7d1a16;border-color:#d4ad54}
body[data-theme=sinterklaas] #revealed-letter .letter-top{background:#a20b06;color:#fff;border-color:#d4ad54}
body[data-theme=sinterklaas] #revealed-letter .letter-top :is(.eyebrow,.close-letter){color:#fff4d8}
body[data-theme=sinterklaas] #revealed-letter .letter-note{background:#fff8f3;border-left-color:#d4ad54}
body[data-theme=sinterklaas] :is(#own-wishes,#recipient-wishes,#wish-detail-dialog) .priority{background:#fff8ed;border-color:#d4ad54;color:#7d1a16}
body[data-theme=sinterklaas] .christmas-note{background:#a20b06;color:#fffaf4;border:1px solid #dca62e;padding:38px 200px 38px 32px;min-height:245px}
body[data-theme=sinterklaas] .christmas-note :is(h2,h2 em,.eyebrow){color:#f4c84f}
body[data-theme=sinterklaas] .christmas-note :is(p,blockquote,blockquote small){color:#fff4dc}
body[data-theme=sinterklaas] .christmas-note :is(.original-quotes,.theme-ornament){display:none}
.swatch-sinterklaas{background:linear-gradient(120deg,#a20b06 65%,#dfb33e 65%,#dfb33e 69%,#fffdfb 69%)}
.settings-preview[data-theme=sinterklaas]{background:#a20b06;border:1px solid #dca62e;color:#fffaf4}
body[data-theme=sinterklaas] .post-office{border-color:#d4ad54}
body[data-theme=sinterklaas] .post-office .post-sidebar{background:#a20b06}
body[data-theme=sinterklaas] .post-office :is(.post-emblem,.postal-seal){background:#fffaf4;box-shadow:0 3px 0 #d4ad5433}
body[data-theme=sinterklaas] .conversation-choice{background:#850500;border-color:#d4ad5455}
body[data-theme=sinterklaas] .conversation-choice.selected{background:#fffaf4;color:#7d1a16;border-color:#d4ad54}
body[data-theme=sinterklaas] .conversation-choice.selected .correspondent{background:#f5e6c8;color:#7d1a16}
body[data-theme=sinterklaas] .post-office .chat-message.reply{background:#fffaf4;color:#7d1a16;border-color:#dcc5a5}
body[data-theme=sinterklaas] .post-office .chat-message.outgoing{background:#a20b06;border-color:#a20b06;color:#fff}
body[data-theme=sinterklaas] .post-office .message-input{border-color:#d4ad54}
body[data-theme=sinterklaas] .compose-bottom .button{background:#a20b06;color:#fff;box-shadow:0 3px 0 #790602}
.sint-mascot{display:none}
body[data-theme=sinterklaas] .sint-mascot{display:block;position:absolute;right:28px;top:50%;transform:translateY(-50%);width:140px;height:205px;pointer-events:none}
body[data-theme=sinterklaas] .brand-miter svg path:first-child,body[data-theme=sinterklaas] .chat-mark-sint svg path:first-child{fill:#b62b25}
body[data-theme=sinterklaas] .brand-miter svg path,body[data-theme=sinterklaas] .chat-mark-sint svg path{stroke:#f1c34c}
@media(max-width:620px){body[data-theme=sinterklaas] .christmas-note{padding:26px 22px}body[data-theme=sinterklaas] .sint-mascot{position:static;transform:none;width:94px;height:138px;margin:18px auto 0}}
body:not([data-theme=kerst]) :is(#draw-waiting,#messages-waiting)>span{display:none}
body:not([data-theme=kerst]) #organiseren .admin-paper h2,body:not([data-theme=kerst]) :is(#draw-waiting,#messages-waiting) h2,body:not([data-theme=kerst]) .empty-wishes h3{font-family:var(--surface-heading);font-weight:500;line-height:1.2}
body[data-theme=sinterklaas] #revealed-letter .wishes-heading h3{font-family:var(--surface-heading);font-size:26px;font-weight:500;line-height:1.25}
body[data-theme] :is(#name-warning-dialog,#family-name-dialog) .secret-edit{border-radius:var(--surface-small-radius)}
body[data-theme=sinterklaas] .christmas-note>p:not(.eyebrow){color:#fff4dc}