[theme="medium-gray"] {
    --lumo-base-color: #5a5a5a;
    --lumo-tint-5pct: rgba(255, 255, 255, 0.05);
    --lumo-tint-10pct: rgba(255, 255, 255, 0.1);
    --lumo-tint-20pct: rgba(255, 255, 255, 0.2);
    --lumo-tint-30pct: rgba(255, 255, 255, 0.3);
    --lumo-tint-40pct: rgba(255, 255, 255, 0.4);
    --lumo-tint-50pct: rgba(255, 255, 255, 0.5);
    --lumo-tint-60pct: rgba(255, 255, 255, 0.6);
    --lumo-tint-70pct: rgba(255, 255, 255, 0.7);
    --lumo-tint-80pct: rgba(255, 255, 255, 0.8);
    --lumo-tint-90pct: rgba(255, 255, 255, 0.9);
    --lumo-shade-5pct: rgba(0, 0, 0, 0.05);
    --lumo-shade-10pct: rgba(0, 0, 0, 0.1);
    --lumo-shade-20pct: rgba(0, 0, 0, 0.2);
    --lumo-shade-30pct: rgba(0, 0, 0, 0.3);
    --lumo-shade-40pct: rgba(0, 0, 0, 0.4);
    --lumo-shade-50pct: rgba(0, 0, 0, 0.5);
    --lumo-shade-60pct: rgba(0, 0, 0, 0.6);
    --lumo-shade-70pct: rgba(0, 0, 0, 0.7);
    --lumo-shade-80pct: rgba(0, 0, 0, 0.8);
    --lumo-shade-90pct: rgba(0, 0, 0, 0.9);
    --lumo-contrast-5pct: var(--lumo-tint-5pct);
    --lumo-contrast-10pct: var(--lumo-tint-10pct);
    --lumo-contrast-20pct: var(--lumo-tint-20pct);
    --lumo-contrast-30pct: var(--lumo-tint-30pct);
    --lumo-contrast-40pct: var(--lumo-tint-40pct);
    --lumo-contrast-50pct: var(--lumo-tint-50pct);
    --lumo-contrast-60pct: var(--lumo-tint-60pct);
    --lumo-contrast-70pct: var(--lumo-tint-70pct);
    --lumo-contrast-80pct: var(--lumo-tint-80pct);
    --lumo-contrast-90pct: var(--lumo-tint-90pct);
    --lumo-header-text-color: var(--lumo-contrast-90pct);
    --lumo-body-text-color: var(--lumo-contrast-80pct);
    --lumo-secondary-text-color: var(--lumo-contrast-60pct);
    --lumo-tertiary-text-color: var(--lumo-contrast-40pct);
    --lumo-disabled-text-color: var(--lumo-contrast-30pct);
    --lumo-primary-color: #2f2f2f;
    --lumo-primary-text-color: var(--lumo-contrast-90pct);
    --lumo-primary-contrast-color: #ffffff;
    --lumo-error-color: #af3e3e;
    --lumo-error-text-color: var(--lumo-error-color);
    --lumo-error-contrast-color: #ffffff;
    --lumo-success-color: #4a7a4a;
    --lumo-success-text-color: var(--lumo-success-color);
    --lumo-success-contrast-color: #ffffff;
}

[theme="heart"] {
    --lumo-base-color: #ffe0e9;
    --lumo-tint-5pct: rgba(255, 100, 150, 0.05);
    --lumo-tint-10pct: rgba(255, 100, 150, 0.1);
    --lumo-tint-20pct: rgba(255, 100, 150, 0.2);
    --lumo-tint-30pct: rgba(255, 100, 150, 0.3);
    --lumo-tint-40pct: rgba(255, 100, 150, 0.4);
    --lumo-tint-50pct: rgba(255, 100, 150, 0.5);
    --lumo-tint-60pct: rgba(255, 100, 150, 0.6);
    --lumo-tint-70pct: rgba(255, 100, 150, 0.7);
    --lumo-tint-80pct: rgba(255, 100, 150, 0.8);
    --lumo-tint-90pct: rgba(255, 100, 150, 0.9);
    --lumo-shade-5pct: rgba(120, 20, 50, 0.05);
    --lumo-shade-10pct: rgba(120, 20, 50, 0.1);
    --lumo-shade-20pct: rgba(120, 20, 50, 0.2);
    --lumo-shade-30pct: rgba(120, 20, 50, 0.3);
    --lumo-shade-40pct: rgba(120, 20, 50, 0.4);
    --lumo-shade-50pct: rgba(120, 20, 50, 0.5);
    --lumo-shade-60pct: rgba(120, 20, 50, 0.6);
    --lumo-shade-70pct: rgba(120, 20, 50, 0.7);
    --lumo-shade-80pct: rgba(120, 20, 50, 0.8);
    --lumo-shade-90pct: rgba(120, 20, 50, 0.9);
    --lumo-contrast-5pct: var(--lumo-shade-5pct);
    --lumo-contrast-10pct: var(--lumo-shade-10pct);
    --lumo-contrast-20pct: var(--lumo-shade-20pct);
    --lumo-contrast-30pct: var(--lumo-shade-30pct);
    --lumo-contrast-40pct: var(--lumo-shade-40pct);
    --lumo-contrast-50pct: var(--lumo-shade-50pct);
    --lumo-contrast-60pct: var(--lumo-shade-60pct);
    --lumo-contrast-70pct: var(--lumo-shade-70pct);
    --lumo-contrast-80pct: var(--lumo-shade-80pct);
    --lumo-contrast-90pct: var(--lumo-shade-90pct);
    --lumo-header-text-color: #9d1a3f;
    --lumo-body-text-color: #5d0f25;
    --lumo-secondary-text-color: #7d1532;
    --lumo-tertiary-text-color: #9d1a3f;
    --lumo-disabled-text-color: var(--lumo-contrast-30pct);
    --lumo-primary-color: #e60026;
    --lumo-primary-text-color: #e60026;
    --lumo-primary-contrast-color: #ffffff;
    --lumo-error-color: #ff0000;
    --lumo-error-text-color: var(--lumo-error-color);
    --lumo-error-contrast-color: #ffffff;
    --lumo-success-color: #ff69b4;
    --lumo-success-text-color: var(--lumo-success-color);
    --lumo-success-contrast-color: #ffffff;
    --lumo-border-radius: 1em;
    --lumo-border-radius-m: 1em;
    --lumo-border-radius-l: 1.5em;
    --lumo-border-radius-s: 0.5em;
}

[theme="heart"] body {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M10 30 A20 20 0 0 1 50 30 A20 20 0 0 1 90 30 Q90 60 50 90 Q10 60 10 30 Z' fill='%23ffb3c6' opacity='0.3' transform='translate(10, 10) scale(0.5) rotate(-15, 50, 50)'/%3E%3Cpath d='M10 30 A20 20 0 0 1 50 30 A20 20 0 0 1 90 30 Q90 60 50 90 Q10 60 10 30 Z' fill='%23ffb3c6' opacity='0.2' transform='translate(60, 20) scale(0.3) rotate(20, 50, 50)'/%3E%3Cpath d='M10 30 A20 20 0 0 1 50 30 A20 20 0 0 1 90 30 Q90 60 50 90 Q10 60 10 30 Z' fill='%23ffb3c6' opacity='0.4' transform='translate(30, 60) scale(0.4) rotate(10, 50, 50)'/%3E%3Cpath d='M10 30 A20 20 0 0 1 50 30 A20 20 0 0 1 90 30 Q90 60 50 90 Q10 60 10 30 Z' fill='%23ffb3c6' opacity='0.25' transform='translate(75, 70) scale(0.25) rotate(-30, 50, 50)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

[theme="heart"] [part="navbar"], [theme="heart"] [part="drawer"] {
    background-color: #ffe0e9 !important;
}

[theme="heart"] vaadin-button[theme~="primary"] {
    background-color: #e60026;
    color: white;
}

[theme="heart"] vaadin-tab::before {
    content: "❤";
    margin-right: 0.5em;
    color: #e60026;
}

[theme="heart"] vaadin-tab[selected]::before {
    content: "💖";
}

[theme="heart"] h1, [theme="heart"] h2, [theme="heart"] h3, [theme="heart"] h4, [theme="heart"] h5, [theme="heart"] h6 {
    color: #9d1a3f;
    font-family: 'Comic Sans MS', cursive, sans-serif;
}

.click-heart {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    color: #ffb3c6;
    font-size: 24px;
    user-select: none;
    animation: heart-fall 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    transform: translate(-50%, -50%) scale(var(--heart-scale, 1)) rotate(var(--heart-rotation, 0deg));
}

@keyframes heart-fall {
    0% {
        transform: translate(-50%, -50%) scale(var(--heart-scale, 1)) rotate(var(--heart-rotation, 0deg));
        opacity: 0.8;
    }
    15% {
        transform: translate(calc(-50% + var(--heart-x-move, 0px) * 0.15), calc(-50% - 60px)) scale(calc(var(--heart-scale, 1) * 1.2)) rotate(calc(var(--heart-rotation, 0deg) + 10deg));
        opacity: 1;
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* Ease in to simulate gravity acceleration */
    }
    100% {
        transform: translate(calc(-50% + var(--heart-x-move, 0px)), 100vh) scale(var(--heart-scale, 1)) rotate(calc(var(--heart-rotation, 0deg) - 20deg));
        opacity: 0;
    }
}


.gold-border {
    position: relative;
}

.gold-border > * {
    z-index: 2;
}

.gold-border::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg, #ffd700, #fff700, #ffb700, #ff5900, #ffd700);
    background-size: 400% 400%;
    z-index: 1;
    animation: gold-glow 1.5s linear infinite;
    border-radius: 6px;
    pointer-events: none;
}

.gold-border::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: linear-gradient(#233348, #233348) padding-box,
                linear-gradient(45deg, #ffd700, #fff700, #ffd700, #ffae00, #ffd700) border-box;
    background-size: 100% 100%, 400% 400%;
    z-index: 1;
    animation: gold-glow 3s linear infinite;
    pointer-events: none;
}

@keyframes gold-glow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}