body[data-site-theme] {
    --cream: var(--appearance-background);
    --blush: var(--appearance-accent);
    --white: var(--appearance-surface);
    --ink: var(--appearance-text);
    --gold: var(--appearance-primary);
    --gold-soft: var(--appearance-accent);
    --gold-dark: var(--appearance-primary);
    --rose: var(--appearance-primary);
    --surface-raised: var(--appearance-surface);
    --line: rgba(110, 75, 78, .22);
    --muted: rgba(56, 46, 48, .72);
    --shadow: 0 16px 44px rgba(59, 34, 43, .14);
    position: relative;
    isolation: isolate;
    color: var(--appearance-text);
    background: linear-gradient(145deg, var(--appearance-background), var(--appearance-surface)) fixed;
}

@supports (color: color-mix(in srgb, white, black)) {
    body[data-site-theme] {
        --line: color-mix(in srgb, var(--appearance-primary) 24%, var(--appearance-surface));
        --muted: color-mix(in srgb, var(--appearance-text) 70%, var(--appearance-background));
        --gold-dark: color-mix(in srgb, var(--appearance-primary) 78%, var(--appearance-text));
        --rose-dark: color-mix(in srgb, var(--appearance-primary) 76%, var(--appearance-text));
        --shadow: 0 16px 44px color-mix(in srgb, var(--appearance-primary) 14%, transparent);
    }
}

body[data-site-theme]::before {
    position: fixed;
    z-index: 0;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: .28;
    background-repeat: repeat;
    animation: site-wedding-pattern-drift 36s ease-in-out infinite alternate;
}

body[data-site-pattern="petals"]::before {
    background-image:
        radial-gradient(ellipse 16px 34px at 8% 16%, rgba(193, 116, 128, .24) 0 42%, transparent 48%),
        radial-gradient(ellipse 12px 26px at 83% 28%, rgba(213, 174, 115, .22) 0 42%, transparent 48%),
        radial-gradient(ellipse 15px 30px at 72% 78%, rgba(193, 116, 128, .18) 0 42%, transparent 48%),
        radial-gradient(ellipse 11px 24px at 20% 86%, rgba(213, 174, 115, .2) 0 42%, transparent 48%);
    background-size: 420px 460px, 560px 580px, 480px 500px, 600px 620px;
}

body[data-site-pattern="floral"]::before {
    background-image:
        radial-gradient(circle at 12% 20%, rgba(160, 126, 104, .19) 0 3px, transparent 4px),
        radial-gradient(ellipse 40px 15px at 14% 19%, rgba(119, 148, 119, .2) 0 42%, transparent 48%),
        radial-gradient(ellipse 34px 13px at 10% 24%, rgba(119, 148, 119, .16) 0 42%, transparent 48%),
        radial-gradient(circle at 88% 78%, rgba(185, 128, 141, .2) 0 4px, transparent 5px),
        radial-gradient(ellipse 38px 14px at 85% 76%, rgba(119, 148, 119, .18) 0 42%, transparent 48%);
    background-size: 500px 540px, 500px 540px, 500px 540px, 640px 620px, 640px 620px;
}

body[data-site-pattern="sparkles"]::before {
    opacity: .22;
    background-image:
        radial-gradient(circle at 9% 13%, rgba(247, 222, 177, .8) 0 1px, transparent 2px),
        radial-gradient(circle at 27% 70%, rgba(216, 175, 225, .7) 0 2px, transparent 3px),
        radial-gradient(circle at 72% 22%, rgba(247, 222, 177, .72) 0 1px, transparent 2px),
        radial-gradient(circle at 91% 62%, rgba(216, 175, 225, .66) 0 2px, transparent 3px),
        radial-gradient(circle at 48% 42%, rgba(247, 222, 177, .55) 0 1px, transparent 2px);
    background-size: 230px 250px, 340px 370px, 290px 310px, 400px 430px, 360px 390px;
}

body[data-site-pattern="hearts"]::before {
    background-image:
        radial-gradient(circle at 22% 23%, rgba(184, 104, 119, .16) 0 5px, transparent 6px),
        radial-gradient(circle at 25% 23%, rgba(184, 104, 119, .16) 0 5px, transparent 6px),
        radial-gradient(circle at 23.5% 25%, rgba(184, 104, 119, .16) 0 6px, transparent 7px),
        radial-gradient(circle at 76% 76%, rgba(213, 174, 115, .17) 0 5px, transparent 6px),
        radial-gradient(circle at 79% 76%, rgba(213, 174, 115, .17) 0 5px, transparent 6px),
        radial-gradient(circle at 77.5% 78%, rgba(213, 174, 115, .17) 0 6px, transparent 7px);
    background-size: 520px 540px, 520px 540px, 520px 540px, 620px 640px, 620px 640px, 620px 640px;
}

body[data-site-pattern="none"]::before {
    display: none;
}

.site-header,
.site-main,
.site-footer {
    position: relative;
    z-index: 1;
}

.site-header {
    border-bottom-color: var(--line);
    background: var(--appearance-surface);
    box-shadow: 0 7px 28px rgba(40, 28, 28, .06);
}

.site-footer {
    border-top-color: var(--line);
    color: var(--muted);
    background: var(--appearance-surface);
}

.site-main .card,
.site-main .home-section,
.site-main .featured-card,
.site-main .template-option {
    border-color: var(--line);
    box-shadow: var(--shadow);
    transform-style: preserve-3d;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.site-main .card,
.site-main .template-option {
    background: var(--appearance-surface);
    color: var(--appearance-text);
}

.site-main .home-section,
.site-main .featured-card {
    background-color: var(--appearance-surface);
    color: var(--appearance-text);
}

.site-main .btn,
.site-nav a,
.nav-button {
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}

.site-main .btn-primary {
    box-shadow: 0 8px 20px rgba(73, 42, 47, .18);
}

.site-main .btn-primary:hover,
.site-main .btn-secondary:hover {
    transform: translateY(-2px);
}

.site-main input,
.site-main select,
.site-main textarea {
    border-color: var(--line);
}

.site-nav a[aria-current="page"] {
    color: var(--gold-dark);
    text-decoration-color: var(--appearance-accent);
    text-decoration-thickness: 2px;
}

body[data-site-theme="midnight"] .site-header,
body[data-site-theme="midnight"] .site-footer {
    border-color: rgba(226, 195, 161, .26);
    background: rgba(42, 31, 48, .94);
}

body[data-site-theme="midnight"] .site-nav a,
body[data-site-theme="midnight"] .nav-button,
body[data-site-theme="midnight"] .site-footer a {
    color: var(--appearance-text);
}

body[data-site-theme="midnight"] .site-main .flash-success {
    background: #243d34;
    border-color: #547b68;
    color: #dff2e7;
}

body[data-site-layout="centered"] .site-header-inner {
    flex-direction: column;
    justify-content: center;
}

body[data-site-layout="centered"] .site-nav {
    justify-content: center;
}

body[data-site-layout="cinematic"] .site-main {
    padding-top: 48px;
    padding-bottom: 64px;
}

body[data-site-layout="cinematic"] .site-header-inner {
    max-width: 1240px;
}

body[data-site-layout="editorial"] .site-main > .container {
    max-width: 1220px;
}

body[data-site-layout="editorial"] .page {
    max-width: 880px;
}

body[data-site-layout="editorial"] .site-header-inner {
    align-items: flex-end;
}

body[data-site-layout="editorial"] .site-nav {
    justify-content: flex-end;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .site-main .card:hover,
    .site-main .template-option:hover {
        transform: perspective(1100px) translateY(-4px) rotateX(.45deg);
        box-shadow: 0 22px 50px rgba(59, 34, 43, .18);
    }

    body[data-site-theme="midnight"] .site-main .card:hover,
    body[data-site-theme="midnight"] .site-main .template-option:hover {
        box-shadow: 0 22px 54px rgba(0, 0, 0, .34);
    }
}

@keyframes site-wedding-pattern-drift {
    from { transform: translate3d(0, -8px, 0); }
    to { transform: translate3d(0, 10px, 0); }
}

@media (max-width: 700px) {
    body[data-site-layout="editorial"] .site-header-inner {
        align-items: stretch;
    }

    body[data-site-layout="editorial"] .site-nav {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-site-theme]::before {
        animation: none;
    }

    .site-main .card,
    .site-main .home-section,
    .site-main .featured-card,
    .site-main .template-option,
    .site-main .btn,
    .site-nav a,
    .nav-button {
        transition: none;
    }
}