@mixin dark-colors {
	--sl-color-accent-low: #2a1b3d;
	--sl-color-accent: #8143c1;
	--sl-color-accent-high: #d1bfeb;
	--sl-color-white: #ffffff;
	--sl-color-gray-1: #eceef2;
	--sl-color-gray-2: #c0c2c7;
	--sl-color-gray-3: #888b96;
	--sl-color-gray-4: #545861;
	--sl-color-gray-5: #353841;
	--sl-color-gray-6: #24272f;
	--sl-color-black: #17181c;
}
@mixin light-colors {
	--sl-color-accent-low: #ddd0f1;
	--sl-color-accent: #8345c3;
	--sl-color-accent-high: #3c2359;
	--sl-color-white: #17181c;
	--sl-color-gray-1: #24272f;
	--sl-color-gray-2: #353841;
	--sl-color-gray-3: #545861;
	--sl-color-gray-4: #888b96;
	--sl-color-gray-5: #c0c2c7;
	--sl-color-gray-6: #eceef2;
	--sl-color-gray-7: #f5f6f8;
	--sl-color-black: #ffffff;
}
:root {
    @include dark-colors;
}
:root[data-theme='light'] {
    @include light-colors;
}

/* Fonts. */
:root {
    --sl-font: "Public Sans";
}
figcaption {
    text-align: center;
    font-style: italic;
    color: var(--sl-color-gray-3);
}

/* Homepage. */
body:has(.hero) {
    // Make background same as hero color.
    background: #2F1B3F;
    header.header {
        --sl-color-bg-nav: #2F1B3F;
    }
    .content-panel {
        // Remove gap from header to hero.
        padding-top: 0;
    }
    .main-frame > :first-child {
        background: var(--sl-color-black);
    }
}
.hero {
    position: relative;
    padding-bottom: 240px;
    margin-bottom: -220px;
    font-weight: 600;
    @include dark-colors;
    .tagline {
        color: var(--sl-color-gray-1);
    }
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX( -50%);
        height: 100%;
        width: 100vw;
        background: #2F1B3F url("/hero-blob.svg") no-repeat;
        background-position: calc(50% - 50px) 10px;
        z-index: -2;
    }
}
.hero h1 {
    background: linear-gradient(transparent 70%, #7F00FF 70%, #7F00FF 90%, transparent 90%);
}
.hero h1::after {
    content: ".";
}
html[lang=ja] .hero h1::after {
    content: "。";
}
.hero .sl-link-button.primary {
    background: #259EB3;
    border-color: #259EB3;
    color: var(--sl-color-white);
    font-weight: bold;
    transition: 1s transform, 1s border-radius;
    border-radius: 22% 21% 26% 23% / 38% 74% 44% 69%;
    transform: rotate(-2deg);
    svg {
        transition: .4s transform;
    }
    &:hover {
        color: var(--sl-color-white);
        border-radius: 20% 24% 29% 20% / 38% 74% 44% 69%;
        transform: rotate(-0.5deg);
        svg {
            transform: translateX(2px);
        }
    }
}
.hero .sl-link-button.primary[data-booth-link] {
    --sl-color-text-accent: #fc4d50;
    --sl-color-black: #ffffff;
}
@media (min-width: 50rem) {
    .hero {
        grid-template-columns: 1fr;
    }
}

/* Header. */
header.header {
    backdrop-filter: blur(16px);
    border-bottom: none;
    --sl-color-text-accent: #ffffff;
    --sl-color-bg-nav: #1C0C28;
    background: rgb(from var(--sl-color-bg-nav) r g b / 0.85);
    .title-wrapper, .right-group {
        @include dark-colors;
    }
}

/* Footer. */
.copyright {
    margin: 1.5rem 0 0;
    font-size: var(--sl-text-xs);
    color: var(--sl-color-gray-3);
}
