/* Arcelia palette: night + plum surfaces, ink text, pink only for emphasis. */
:root,
[data-color-mode="light"],
[data-color-mode="dark"] {
    color-scheme: dark;

    --arcelia-ink: oklch(0.92 0.015 350);
    --arcelia-muted: oklch(0.69 0.025 350);
    --arcelia-pink: oklch(0.8 0.145 350);
    --arcelia-pink-deep: oklch(0.62 0.14 350);
    --arcelia-pink-hover: oklch(0.86 0.125 350);
    --arcelia-plum: oklch(0.22 0.035 335);
    --arcelia-night: oklch(0.14 0.018 335);
    --arcelia-glow: oklch(0.28 0.07 342 / 0.52);
    --arcelia-glass: oklch(0.16 0.02 335 / 0.72);
    --arcelia-shadow: rgb(0 0 0 / 0.18);
    --arcelia-on-accent: var(--arcelia-night);
    --arcelia-line: oklch(0.88 0.04 350 / 0.16);

    --color-primary: var(--arcelia-pink);
    --color-primary-contrast: var(--arcelia-on-accent);
    --color-primary-dark-1: oklch(0.86 0.125 350);
    --color-primary-dark-2: var(--arcelia-ink);
    --color-primary-light-1: var(--arcelia-pink-deep);
    --color-primary-light-2: oklch(0.5 0.11 350);
    --color-primary-light-3: oklch(0.4 0.08 350);
    --color-primary-alpha-10: oklch(0.8 0.145 350 / 0.1);
    --color-primary-alpha-20: oklch(0.8 0.145 350 / 0.2);
    --color-primary-alpha-30: oklch(0.8 0.145 350 / 0.3);
    --color-primary-hover: oklch(0.86 0.125 350);
    --color-primary-active: var(--arcelia-pink-deep);

    --color-body: var(--arcelia-night);
    --color-header-wrapper: oklch(0.16 0.02 335);
    --color-nav-bg: oklch(0.13 0.02 335);
    --color-secondary-nav-bg: var(--arcelia-night);
    --color-footer: oklch(0.13 0.02 335);
    --color-menu: var(--arcelia-plum);
    --color-card: var(--arcelia-plum);
    --color-box-header: oklch(0.25 0.04 335);
    --color-box-body: var(--arcelia-plum);
    --color-box-body-highlight: oklch(0.27 0.045 335);
    --color-secondary: oklch(0.25 0.04 335);
    --color-secondary-bg: oklch(0.25 0.04 335);
    --color-button: oklch(0.28 0.045 335);
    --color-hover: oklch(0.3 0.05 335);
    --color-active: oklch(0.34 0.055 335);
    --color-input-background: oklch(0.18 0.025 335);
    --color-input-border: oklch(0.4 0.045 335);
    --color-input-border-hover: oklch(0.55 0.07 350);
    --color-code-bg: oklch(0.12 0.016 335);
    --color-markup-code-block: oklch(0.12 0.016 335);
    --color-markup-code-inline: oklch(0.18 0.025 335);
    --color-light-border: var(--arcelia-line);
    --color-shadow: var(--arcelia-shadow);

    --color-text-dark: var(--arcelia-ink);
    --color-text: var(--arcelia-ink);
    --color-text-light: var(--arcelia-muted);
    --color-text-light-1: var(--arcelia-muted);
    --color-text-light-2: oklch(0.58 0.025 350);
    --color-text-light-3: oklch(0.5 0.02 350);
    --color-input-text: var(--arcelia-ink);
    --color-placeholder-text: oklch(0.55 0.02 350);
    --color-text-focus: var(--arcelia-ink);
    --color-accent: var(--arcelia-pink);
    --color-small-accent: var(--arcelia-pink);
    --color-highlight-fg: var(--arcelia-pink);
    --color-highlight-bg: oklch(0.8 0.145 350 / 0.16);
}

/* Forgejo's light and auto-light modes use a separate, contrast-checked Arcelia palette. */
html[data-theme="forgejo-light"],
html[data-theme="gitea"],
html[data-color-mode="light"] {
    color-scheme: light;

    --arcelia-ink: oklch(0.24 0.035 335);
    --arcelia-muted: oklch(0.48 0.03 335);
    --arcelia-pink: oklch(0.61 0.135 350);
    --arcelia-pink-deep: oklch(0.49 0.11 350);
    --arcelia-pink-hover: oklch(0.52 0.12 350);
    --arcelia-plum: oklch(0.94 0.025 350);
    --arcelia-night: oklch(0.975 0.012 350);
    --arcelia-glow: oklch(0.88 0.07 350 / 0.58);
    --arcelia-glass: oklch(0.975 0.015 350 / 0.74);
    --arcelia-shadow: oklch(0.28 0.035 335 / 0.12);
    --arcelia-on-accent: oklch(0.2 0.035 335);
    --arcelia-line: oklch(0.4 0.035 335 / 0.22);

    --color-primary: var(--arcelia-pink);
    --color-primary-contrast: var(--arcelia-on-accent);
    --color-primary-dark-1: oklch(0.52 0.12 350);
    --color-primary-dark-2: oklch(0.43 0.095 350);
    --color-primary-light-1: oklch(0.72 0.11 350);
    --color-primary-light-2: oklch(0.81 0.075 350);
    --color-primary-light-3: oklch(0.9 0.04 350);
    --color-primary-alpha-10: oklch(0.61 0.135 350 / 0.1);
    --color-primary-alpha-20: oklch(0.61 0.135 350 / 0.2);
    --color-primary-alpha-30: oklch(0.61 0.135 350 / 0.3);
    --color-primary-hover: var(--arcelia-pink-hover);
    --color-primary-active: var(--arcelia-pink-deep);

    --color-body: var(--arcelia-night);
    --color-header-wrapper: oklch(0.96 0.018 350);
    --color-nav-bg: oklch(0.975 0.012 350);
    --color-secondary-nav-bg: var(--arcelia-night);
    --color-footer: oklch(0.96 0.018 350);
    --color-menu: var(--arcelia-plum);
    --color-card: var(--arcelia-plum);
    --color-box-header: oklch(0.92 0.03 350);
    --color-box-body: var(--arcelia-plum);
    --color-box-body-highlight: oklch(0.91 0.04 350);
    --color-secondary: oklch(0.92 0.03 350);
    --color-secondary-bg: oklch(0.92 0.03 350);
    --color-button: oklch(0.9 0.028 350);
    --color-hover: oklch(0.88 0.04 350);
    --color-active: oklch(0.84 0.05 350);
    --color-input-background: oklch(0.99 0.006 350);
    --color-input-border: oklch(0.64 0.04 335);
    --color-input-border-hover: oklch(0.61 0.135 350);
    --color-code-bg: oklch(0.92 0.018 335);
    --color-markup-code-block: oklch(0.92 0.018 335);
    --color-markup-code-inline: oklch(0.94 0.024 350);
    --color-light-border: var(--arcelia-line);
    --color-shadow: var(--arcelia-shadow);

    --color-text-dark: var(--arcelia-ink);
    --color-text: var(--arcelia-ink);
    --color-text-light: var(--arcelia-muted);
    --color-text-light-1: var(--arcelia-muted);
    --color-text-light-2: oklch(0.56 0.03 335);
    --color-text-light-3: oklch(0.65 0.025 335);
    --color-input-text: var(--arcelia-ink);
    --color-placeholder-text: oklch(0.58 0.025 335);
    --color-text-focus: var(--arcelia-ink);
    --color-accent: var(--arcelia-pink);
    --color-small-accent: var(--arcelia-pink);
    --color-highlight-fg: var(--arcelia-pink-deep);
    --color-highlight-bg: oklch(0.61 0.135 350 / 0.14);
}

@media (prefers-color-scheme: light) {
    html[data-theme="forgejo-auto"] {
        color-scheme: light;
        --arcelia-ink: oklch(0.24 0.035 335);
        --arcelia-muted: oklch(0.48 0.03 335);
        --arcelia-pink: oklch(0.61 0.135 350);
        --arcelia-pink-deep: oklch(0.49 0.11 350);
        --arcelia-pink-hover: oklch(0.52 0.12 350);
        --arcelia-plum: oklch(0.94 0.025 350);
        --arcelia-night: oklch(0.975 0.012 350);
        --arcelia-glow: oklch(0.88 0.07 350 / 0.58);
        --arcelia-glass: oklch(0.975 0.015 350 / 0.74);
        --arcelia-shadow: oklch(0.28 0.035 335 / 0.12);
        --arcelia-on-accent: oklch(0.2 0.035 335);
        --arcelia-line: oklch(0.4 0.035 335 / 0.22);

        --color-header-wrapper: oklch(0.96 0.018 350);
        --color-nav-bg: oklch(0.975 0.012 350);
        --color-footer: oklch(0.96 0.018 350);
        --color-box-header: oklch(0.92 0.03 350);
        --color-box-body-highlight: oklch(0.91 0.04 350);
        --color-secondary: oklch(0.92 0.03 350);
        --color-secondary-bg: oklch(0.92 0.03 350);
        --color-button: oklch(0.9 0.028 350);
        --color-hover: oklch(0.88 0.04 350);
        --color-active: oklch(0.84 0.05 350);
        --color-input-background: oklch(0.99 0.006 350);
        --color-input-border: oklch(0.64 0.04 335);
        --color-input-border-hover: oklch(0.61 0.135 350);
        --color-code-bg: oklch(0.92 0.018 335);
        --color-markup-code-block: oklch(0.92 0.018 335);
        --color-markup-code-inline: oklch(0.94 0.024 350);
        --color-text-light-2: oklch(0.56 0.03 335);
        --color-text-light-3: oklch(0.65 0.025 335);
        --color-placeholder-text: oklch(0.58 0.025 335);
    }
}

body {
    background:
        radial-gradient(ellipse 90% 75% at 72% -8%, var(--arcelia-glow) 0%, transparent 100%),
        var(--arcelia-night) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    color: var(--arcelia-ink) !important;
}

a,
.repo-owner-name,
.repo-name {
    color: var(--arcelia-pink);
}

a:hover,
a:focus,
.repo-owner-name:hover,
.repo-name:hover {
    color: var(--arcelia-pink-hover);
}

.ui.primary.button,
.ui.primary.buttons .button,
.ui.button.primary {
    background: var(--arcelia-pink);
    border-color: var(--arcelia-pink);
    color: var(--arcelia-on-accent);
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover,
.ui.button.primary:hover {
    background: var(--arcelia-pink-hover);
    border-color: var(--arcelia-pink-hover);
    color: var(--arcelia-on-accent);
}

img[src$="/assets/img/logo.svg"] {
    content: url("/assets/img/arcelia-mark.png");
    filter: drop-shadow(0 0 8px oklch(0.8 0.145 350 / 0.32));
}

body,
.ui,
.ui.button,
input,
textarea,
select {
    font-family: "Lexend", ui-rounded, "Avenir Next", "Trebuchet MS", sans-serif !important;
}

.arcelia-home {
    display: grid;
    min-height: calc(100vh - 7rem);
    place-items: center;
}

.arcelia-home__hero {
    display: grid;
    min-height: min(42rem, calc(100vh - 10rem));
    place-items: center;
    width: min(100%, 70rem);
    padding: clamp(3rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4rem) 2rem;
    text-align: center;
}

.arcelia-home__inner {
    max-width: 42rem;
}

.arcelia-home__mark {
    display: block;
    height: auto;
    margin: 0 auto 1.75rem;
    width: clamp(4.75rem, 9vw, 7rem);
}

.arcelia-home__eyebrow {
    color: var(--arcelia-pink);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 0 0 1rem;
    text-transform: uppercase;
}

.arcelia-home h1 {
    color: var(--arcelia-ink);
    font-size: clamp(2.8rem, 7vw, 5.8rem);
    font-weight: 600;
    letter-spacing: -0.065em;
    line-height: 0.98;
    margin: 0;
}

.arcelia-home__lede {
    color: var(--arcelia-muted);
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.65;
    margin: 1.6rem auto 0;
    max-width: 34rem;
}

.arcelia-home__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
    margin-top: 2rem;
}

.arcelia-home__actions .ui.button {
    border-radius: 0;
    font-weight: 600;
    margin: 0;
    padding: 0.82rem 1.1rem;
}

.arcelia-home__actions .ui.basic.button {
    border-color: var(--arcelia-line) !important;
    color: var(--arcelia-ink) !important;
}

.arcelia-home__actions .ui.basic.button:hover {
    background: oklch(0.22 0.035 335) !important;
    border-color: var(--arcelia-pink) !important;
}

.arcelia-home__about {
    border-top: 1px solid var(--arcelia-line);
    color: var(--arcelia-muted);
    font-size: 0.9rem;
    line-height: 1.65;
    max-width: 42rem;
    padding: 1.5rem;
    text-align: center;
}

.arcelia-home__about p {
    margin: 0;
}

@media (max-width: 640px) {
    .arcelia-home__hero {
        min-height: calc(100vh - 8rem);
        padding-inline: 1.25rem;
    }

    .arcelia-home__actions {
        align-items: stretch;
        flex-direction: column;
    }

    #navbar,
    .page-footer {
        border-radius: 0.7rem;
        margin-inline: 0.5rem;
    }
}

#navbar {
    background: var(--arcelia-glass) !important;
    border: 1px solid var(--arcelia-line);
    border-radius: 0.9rem;
    box-shadow: 0 0.75rem 2.5rem var(--arcelia-shadow);
    margin: 0.85rem clamp(0.75rem, 2vw, 1.5rem);
    padding: 0.3rem 0.5rem;
    width: auto;
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    backdrop-filter: blur(16px) saturate(120%);
}

#navbar .ui.menu {
    background: transparent !important;
}

.page-footer {
    background: var(--arcelia-glass) !important;
    border: 1px solid var(--arcelia-line);
    border-radius: 0.9rem;
    box-shadow: 0 0.75rem 2.5rem var(--arcelia-shadow);
    margin: 0.85rem clamp(0.75rem, 2vw, 1.5rem);
    padding: 0.8rem 1rem;
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    backdrop-filter: blur(16px) saturate(120%);
}
