@font-face {
  font-family: "Gwendolyn";
  src: url("/assets/fonts/wedding/Gwendolyn-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Micro 5";
  src: url("/assets/fonts/wedding/Micro5-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Crafty Girls";
  src: url("/assets/fonts/wedding/CraftyGirls-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Kodchasan";
  src: url("/assets/fonts/wedding/Kodchasan-ExtraLight.ttf") format("truetype");
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: "Kodchasan";
  src: url("/assets/fonts/wedding/Kodchasan-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Kodchasan";
  src: url("/assets/fonts/wedding/Kodchasan-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Kodchasan";
  src: url("/assets/fonts/wedding/Kodchasan-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Dr Sugiyama";
  src: url("/assets/fonts/wedding/DrSugiyama-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Oleo Script Swash Caps";
  src: url("/assets/fonts/wedding/OleoScriptSwashCaps-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Kalam";
  src: url("/assets/fonts/wedding/Kalam-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/wedding/CormorantGaramond[wght].ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

.wedding-theme {
  --wedding-page: var(--wedding-page-light, #f4ede6);
  --wedding-panel: var(--wedding-panel-light, #faf6f1);
  --wedding-field: var(--wedding-field-light, #fffbf7);
  --wedding-soft: var(--wedding-soft-light, #ebdece);
  --wedding-ink: var(--wedding-ink-light, #272322);
  --wedding-muted: var(--wedding-muted-light, #6a6a6a);
  --wedding-accent: var(--wedding-accent-light, #763e3e);
  --wedding-highlight: var(--wedding-highlight-light, #9a5e70);
  --wedding-track: var(--wedding-track-light, #d9d9d9);
  --wedding-success: var(--wedding-success-light, #72a17c);
  --wedding-panel-radius: var(--wedding-panel-radius-value, 30px);
  --wedding-control-radius: var(--wedding-control-radius-value, 12px);
  --wedding-card-radius: var(--wedding-card-radius-value, 15px);
  --wedding-transition: 220ms cubic-bezier(.22, .8, .28, 1);
  color: var(--wedding-ink);
  background: var(--wedding-page);
  font-family: "Kodchasan", system-ui, sans-serif;
  -webkit-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}

html.darkmode .wedding-theme {
  --wedding-page: var(--wedding-page-dark, #1d1a1a);
  --wedding-panel: var(--wedding-panel-dark, #292424);
  --wedding-field: var(--wedding-field-dark, #352e2c);
  --wedding-soft: var(--wedding-soft-dark, #463b37);
  --wedding-ink: var(--wedding-ink-dark, #f4eee8);
  --wedding-muted: var(--wedding-muted-dark, #c4b7af);
  --wedding-accent: var(--wedding-accent-dark, #a75f74);
  --wedding-highlight: var(--wedding-highlight-dark, #dba7b6);
  --wedding-track: var(--wedding-track-dark, #665853);
  --wedding-success: var(--wedding-success-dark, #8fb79a);
}

html.darkmode .wedding-theme :where(
  .input-wrap input,
  .save-row input,
  .save-description-reveal textarea,
  .share-row input,
  .debug-position-grid input,
  .unit-input input
) {
  border-color: color-mix(in srgb, var(--wedding-accent) 75%, transparent);
  color: var(--wedding-ink);
  background: var(--wedding-field);
}

html.darkmode .wedding-theme :where(.select-wrap select, .preview-background-control select) {
  color: var(--wedding-ink);
  background: var(--wedding-soft);
}

.wedding-theme :where(button, input, select, textarea) {
  font: inherit;
}

.wedding-theme :where(input, select, textarea) {
  color: var(--wedding-ink);
}

.wedding-theme :where(input, select, textarea)::placeholder {
  color: color-mix(in srgb, var(--wedding-muted) 48%, transparent);
  opacity: 1;
}

.wedding-theme :where(button, input, select, textarea):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--wedding-highlight) 72%, white);
  outline-offset: 2px;
}

.wedding-theme :where(.wedding-panel, .control-panel, .preview-panel, .share-section, .saved-section) {
  border: 0;
  border-radius: var(--wedding-panel-radius);
  color: var(--wedding-ink);
  background: var(--wedding-panel);
}

.wedding-theme :where(.wedding-card, .asset-card, .saved-card, .save-box) {
  border-radius: var(--wedding-card-radius);
}

.wedding-theme :where(.wedding-field, .input-wrap input, .save-row input, .save-description-reveal textarea, .share-row input) {
  border: 1px solid color-mix(in srgb, var(--wedding-accent) 24%, transparent);
  border-radius: var(--wedding-control-radius);
  color: var(--wedding-ink);
  background: var(--wedding-field);
}

.wedding-theme :where(.wedding-select, .select-wrap select, .preview-background-control select) {
  border-radius: var(--wedding-control-radius);
  color: var(--wedding-ink);
  background: var(--wedding-soft);
}

.wedding-theme :where(.wedding-range, .range-input) {
  accent-color: var(--wedding-accent);
}

.wedding-theme :where(.wedding-switch, .fake-switch) {
  background: var(--wedding-track);
  transition: background var(--wedding-transition);
}

.wedding-theme :where(.wedding-button, .button, .upload-button) {
  border-radius: var(--wedding-control-radius);
  transition: color var(--wedding-transition), background var(--wedding-transition), border-color var(--wedding-transition), transform var(--wedding-transition);
}

.wedding-theme :where(.wedding-button-primary, .button-primary) {
  color: #fff;
  background: var(--wedding-accent);
}

@media (prefers-reduced-motion: reduce) {
  .wedding-theme *,
  .wedding-theme *::before,
  .wedding-theme *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}