/* Tilira's look for the pages before login (login, registration, password reset): the same
   honeycomb background, logo and honey colours as the public pages, light or dark with the
   visitor's theme (Unfold sets html.dark). */

body.login {
    --auth-bg: #fbf7ef;
    --auth-surface: #ffffff;
    --auth-line: #e7dcc8;
    --auth-link: #b45309;
    --auth-link-hover: #92400e;
    --auth-glow: #fdecc8;
    --auth-hex: 0.22;
    --auth-shadow: 0 18px 50px rgb(68 44 12 / 0.16);
    background:
        radial-gradient(ellipse at 80% 10%, var(--auth-glow), transparent 55%),
        var(--auth-bg) !important;
}

html.dark body.login {
    --auth-bg: #14110c;
    --auth-surface: #1f1a13;
    --auth-line: #3a3124;
    --auth-link: #fbbf24;
    --auth-link-hover: #fcd34d;
    --auth-glow: #3a2a0f;
    --auth-hex: 0.3;
    --auth-shadow: 0 18px 50px rgb(0 0 0 / 0.45);
}

body.login::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%23d9a441' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: 56px 97px;
    content: "";
    inset: 0;
    opacity: var(--auth-hex);
    pointer-events: none;
    position: fixed;
}

body.login #page {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

.foundation-auth {
    /* Honey instead of the dashboard's accent colour for buttons and focus rings. */
    --color-primary-400: oklch(82.8% 0.189 84.429);
    --color-primary-500: oklch(76.9% 0.188 70.08);
    --color-primary-600: oklch(55.5% 0.163 48.998);
    --color-primary-700: oklch(47% 0.137 46.201);
    background: var(--auth-surface);
    border: 1px solid var(--auth-line);
    border-radius: 16px;
    box-shadow: var(--auth-shadow);
    margin: 4.5rem 0 2rem;
    padding: 2rem 1.75rem;
}

html.dark .foundation-auth {
    --color-primary-600: oklch(66.6% 0.179 58.318);
}

/* The site name beside the logo (FOUNDATION["LOGO"]) and links in honey tones. */
.foundation-auth-brand span,
.foundation-auth a {
    color: var(--auth-link) !important;
}

.foundation-auth a:hover {
    color: var(--auth-link-hover) !important;
}

body.login #page a[href] .material-symbols-outlined,
body.login #page > div > div:last-child a {
    color: var(--auth-link);
}