/* Semantic colours override legacy component colours without changing template artwork. */
#invitation{--ui-surface:var(--base-surface);--ui-text:var(--base-text);--ui-muted:var(--base-muted);--ui-heading:var(--base-heading);--ui-link:var(--base-link);--ui-primary:var(--base-primary);--ui-on-primary:var(--base-on-primary);--ui-hover:var(--base-hover);--ui-on-hover:var(--base-on-hover);--ui-field:var(--base-field);--ui-field-text:var(--base-field-text);--ui-placeholder:var(--base-placeholder);--ui-border:var(--base-border);--ui-field-border:var(--base-field-border);--ui-focus:var(--base-focus);--ui-error:var(--base-error);--ui-success:var(--base-success);}
#invitation .dark{--ui-surface:var(--inverse-surface);--ui-text:var(--inverse-text);--ui-muted:var(--inverse-muted);--ui-heading:var(--inverse-heading);--ui-link:var(--inverse-link);--ui-primary:var(--inverse-primary);--ui-on-primary:var(--inverse-on-primary);--ui-hover:var(--inverse-hover);--ui-on-hover:var(--inverse-on-hover);--ui-field:var(--inverse-field);--ui-field-text:var(--inverse-field-text);--ui-placeholder:var(--inverse-placeholder);--ui-border:var(--inverse-border);--ui-field-border:var(--inverse-field-border);--ui-focus:var(--inverse-focus);--ui-error:var(--inverse-error);--ui-success:var(--inverse-success);}
#invitation :is(.event,.haveli-card,.voice-card,.upload-panel,.review-panel,.op-card){--ui-surface:var(--base-surface);--ui-text:var(--base-text);--ui-muted:var(--base-muted);--ui-heading:var(--base-heading);--ui-link:var(--base-link);--ui-primary:var(--base-primary);--ui-on-primary:var(--base-on-primary);--ui-hover:var(--base-hover);--ui-on-hover:var(--base-on-hover);--ui-field:var(--base-field);--ui-field-text:var(--base-field-text);--ui-placeholder:var(--base-placeholder);--ui-border:var(--base-border);--ui-field-border:var(--base-field-border);--ui-focus:var(--base-focus);--ui-error:var(--base-error);--ui-success:var(--base-success);}

#invitation{background:var(--ui-surface);color:var(--ui-text)}
#invitation .dark{background:var(--ui-surface);color:var(--ui-text)}
#invitation :is(.event,.haveli-card,.voice-card,.upload-panel,.review-panel,.op-card){background:var(--ui-surface);color:var(--ui-text)}
#invitation :is(h1,h2,h3,.arabic,.monogram){color:var(--ui-heading)}
#invitation :is(.section p,.event p,.note,.upload-note,.company-kicker,.company-follow){color:var(--ui-muted)}
#invitation :is(label,summary,.time,.counter,.quote,.blessing,.wish-item blockquote){color:var(--ui-text)}
#invitation :is(.small,.guest-welcome,.couture-monogram){color:var(--ui-heading)}
#invitation :is(.event a,.company-links a,.company-name,.text-button,.mini-nav a){color:var(--ui-link)}
#invitation :is(.button,.message .button,.form-box button,.photo-selection-item button,.review-panel button){background:var(--ui-primary);color:var(--ui-on-primary);border:1px solid var(--ui-border);font-size:13px;letter-spacing:1px;min-height:44px}
#invitation :is(.button,.form-box button,.photo-selection-item button,.review-panel button):hover:not(:disabled){background:var(--ui-hover);color:var(--ui-on-hover)}
#invitation :is(.text-button,.mini-nav button,.sound){background:var(--ui-surface);color:var(--ui-link);border-color:var(--ui-border)}
#invitation :is(.text-button,.mini-nav button):hover{background:var(--ui-field);color:var(--ui-field-text)}
#invitation :is(input,textarea,select){background:var(--ui-field);color:var(--ui-field-text);border:1px solid var(--ui-field-border);caret-color:var(--ui-field-text);color-scheme:normal}
#invitation :is(input,textarea)::placeholder{color:var(--ui-placeholder);opacity:1}
#invitation select option{background:var(--ui-field);color:var(--ui-field-text)}
#invitation input[type=file]::file-selector-button{background:var(--ui-primary);color:var(--ui-on-primary);border:1px solid var(--ui-field-border)}
#invitation input[type=file]:hover::file-selector-button{background:var(--ui-hover);color:var(--ui-on-hover)}
#invitation :is(input,textarea):autofill{box-shadow:0 0 0 1000px var(--ui-field) inset;color:var(--ui-field-text);-webkit-text-fill-color:var(--ui-field-text)}
#invitation :is(button,a,input,textarea,select,summary):focus-visible{outline:3px solid var(--ui-focus);outline-offset:3px}
#invitation :is(input,textarea,select):focus-visible{outline-color:var(--ui-field-text)}
#invitation :is(.field-error,[data-state=error]){color:var(--ui-error)}
#invitation [data-state=success]{color:var(--ui-success)}
#invitation [aria-invalid=true]{border:2px solid var(--ui-error)}
#invitation :is(button,input,textarea,select):disabled{opacity:1;cursor:not-allowed;border-style:dashed;background:var(--ui-field);color:var(--ui-placeholder)}
#invitation :is(.photo-selection-item,.venue-frame){background:var(--ui-surface);color:var(--ui-text);border-color:var(--ui-border)}
#invitation .counter span{color:var(--ui-muted)}
#invitation .date-under{color:var(--inverse-text)}
#invitation .scratch-wrap{background:var(--inverse-surface)}
#invitation .op-card strong{color:var(--ui-text)}
#invitation .op-card :is(em,.op-monogram,.op-kicker){color:var(--ui-heading)}
#invitation .op-haveli .haveli-intro h2{color:#fff0cc}
#invitation .op-haveli .op-skip{color:#fff0cc}
#invitation :is(.op-open,.op-skip){background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border)}
#invitation .op-skip{padding:10px 16px;border-radius:24px}
#invitation .op-open>span{background:var(--ui-primary);color:var(--ui-on-primary);border-color:var(--ui-border)}
#invitation .section [data-state=error]{color:var(--ui-error)}
#invitation .section [data-state=success]{color:var(--ui-success)}
#invitation .hero h1 span{color:var(--ui-heading)}
#invitation footer p[lang=ar]{color:var(--ui-heading)!important}

/* Scratch-date reveal: keep date and note readable across every template.
   Some theme sheets make the card transparent, so inverse (light) text
   disappears against the invitation's ivory paper. Pair base text with
   an opaque base surface regardless of those theme-specific overrides. */
#invitation #date .scratch-wrap .date-under{
  background:var(--base-surface,#f8f4ec);
  color:var(--base-text,#2d2a26);
}
#invitation #date .scratch-wrap .date-under :is(.small,strong,span){
  color:inherit;
}