/*
 | Vault — Control Panel login theme
 |
 | Aligns the Statamic CP auth pages (login, password reset, 2FA) with the
 | vault front-end (the Belegmappe + share-link pages): the warm-paper palette,
 | brass accent and Fraunces display serif from resources/css/site.css.
 |
 | Loaded via statamic.cp.custom_css_url, which injects it into every CP page,
 | so EVERY rule here is scoped to `body.outside` — the class Statamic adds only
 | on the unauthenticated auth pages. The authenticated Control Panel is never
 | touched.
 |
 | Statamic CP runs Tailwind v4, whose palette utilities resolve `var(--color-*)`,
 | so remapping those custom properties on `body.outside` re-themes the stock
 | components (card, inputs, primary button, links) without per-element hacks.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

body.outside {
    /* Warm-paper palette — mirrors site.css --color-* tokens. */
    --color-white: #fffefb;        /* card surface */
    --color-gray-50: #faf6ef;      /* page */
    --color-gray-100: #f1eadb;     /* recessed / hover tint */
    --color-gray-150: #f1eadb;
    --color-gray-200: #e2d7c1;     /* hairline */
    --color-gray-300: #cdc0a6;     /* divider / input border */
    --color-gray-400: #b9ab90;
    --color-gray-500: #8d8270;     /* tertiary text */
    --color-gray-600: #6f6555;
    --color-gray-700: #5c5446;     /* secondary text */
    --color-gray-800: #3a342a;
    --color-gray-900: #1d1810;     /* primary text */
    --color-gray-925: #161109;
    --color-gray-950: #120e07;

    /* Brass accent — primary button, links, focus rings. */
    --theme-color-primary: #b1863a;
    --color-primary: #b1863a;
    --color-primary-hover: #946b25;
    --color-primary-border: #946b25;
    --ui-accent: #b1863a;
    --ui-accent-text: #946b25;

    /* Page canvas: warm paper with a soft brass glow, like the FE pages. */
    background-color: #faf6ef !important;
    background-image:
        radial-gradient(58% 90% at 18% -12%, rgba(177, 134, 58, 0.13), transparent 60%),
        radial-gradient(48% 80% at 102% 2%, rgba(177, 134, 58, 0.07), transparent 55%);
    background-attachment: fixed;
    color: #1d1810;

    /* Vertically centre the single auth card. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;

    font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif !important;
}

/* Brand wordmark: hide Statamic's stock mark and render a "Vault" wordmark
   (Fraunces serif + brass dot), echoing the front-end header. Login pages only —
   the authenticated CP nav keeps its own logo. */
body.outside .logo {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    max-width: none !important;
    padding-top: 0 !important;
    margin-bottom: 2rem !important; /* extra breathing room before the card */
}
body.outside .logo svg,
body.outside .logo img {
    display: none !important;
}
body.outside .logo::before {
    content: 'Vault';
    font-family: 'Fraunces', ui-serif, Georgia, serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 1;
    letter-spacing: -0.015em;
    color: #1d1810;
}
body.outside .logo::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #b1863a;
}

/* Remove the passkey option: hide the "Or sign in with" separator and the
   Passkey button — i.e. everything after the email/password <form> in the
   auth card. (No OAuth providers are configured, so nothing else lives here.) */
body.outside form ~ * {
    display: none !important;
}

/* The two nested AuthCard panels: warm surface, defined hairline, soft lift. */
body.outside .rounded-2xl {
    /* #3 mat bar — translucent so the page + its brass glow shine through.
       rgba(232,222,199,0.5) over the #faf6ef page composites to #f1eadb. */
    background-color: rgba(232, 222, 199, 0.5) !important;
    border-width: 0 !important; /* #4 outer hairline fully removed */
    box-shadow:
        0 1px 2px rgba(29, 24, 16, 0.04),
        0 26px 50px -30px rgba(29, 24, 16, 0.30) !important;
}
body.outside .rounded-xl {
    background-color: #fffefb !important; /* #1 white content panel */
    border-color: #e2d7c1 !important; /* #2 inner hairline — plain opaque */
    box-shadow: none !important;
}

/* Title — Fraunces display serif, like the FE headings. */
body.outside h1,
body.outside header [class*="text-xl"] {
    font-family: 'Fraunces', ui-serif, Georgia, serif !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
    color: #1d1810 !important;
}

/* Icon chip above the title — brass. */
body.outside header svg {
    color: #946b25;
}

/* Inputs — warm field, brass focus ring. */
body.outside input[type='email'],
body.outside input[type='password'],
body.outside input[type='text'] {
    background-color: #fffefb;
    border-color: #cdc0a6;
    color: #1d1810;
}
body.outside input::placeholder {
    color: #8d8270;
}
body.outside input:focus,
body.outside input:focus-visible {
    border-color: #b1863a !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(177, 134, 58, 0.22) !important;
}

/* Links (e.g. “Forgot password?”) — brass. */
body.outside a {
    color: #946b25;
}
body.outside a:hover {
    color: #b1863a;
}