/*
 * TELAS DO SERVIDOR DE AUTORIZAÇÃO — login, segundo fator e senha nova.
 *
 * Cópia da tela /login que o frontend tinha antes de o login ir para o backend: mesmos tokens
 * de frontend/src/styles.css e as mesmas medidas das classes do Tailwind, convertidas à mão
 * (o comentário de cada bloco diz de qual classe veio). Mudou um token lá, muda aqui também.
 *
 * As fontes são servidas daqui mesmo, e não do Google: o CSP desta origem fica fechado em
 * 'self' e o IP de quem abre o login não vai para terceiros (LGPD). Fraunces e Hanken
 * Grotesk são OFL, o que permite hospedar os arquivos.
 */

@font-face {
    font-family: "Hanken Grotesk Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/hanken-grotesk-latin-ext.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Hanken Grotesk Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-display: swap;
    font-weight: 300 700;
    src: url("../fonts/fraunces-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-display: swap;
    font-weight: 300 700;
    src: url("../fonts/fraunces-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ tokens */

:root {
    /* Canais L C H, para compor transparências como o Tailwind faz (petrol/12 etc.). */
    --cream: 0.982 0.019 95.5;
    --sand: 0.933 0.031 88.5;
    --terracotta: 0.516 0.132 44.5;
    --terracotta-light: 0.63 0.126 47;
    --petrol: 0.243 0.035 246;
    --warm-gray: 0.45 0.021 71;

    --color-cream: oklch(var(--cream));
    --color-sand: oklch(var(--sand));
    --color-terracotta: oklch(var(--terracotta));
    --color-terracotta-light: oklch(var(--terracotta-light));
    --color-petrol: oklch(var(--petrol));
    --color-warm-gray: oklch(var(--warm-gray));

    --shadow-soft: 0 18px 50px -24px oklch(var(--petrol) / 0.28);
    --shadow-lift: 0 28px 70px -28px oklch(var(--petrol) / 0.38);

    --font-display: "Fraunces", ui-serif, Georgia, serif;
    --font-sans: "Hanken Grotesk Variable", "Work Sans", ui-sans-serif, system-ui, sans-serif;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

    color-scheme: light;
}

/* -------------------------------------------- base (preflight + styles.css) */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
}

[hidden] {
    display: none !important;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

body {
    position: relative;
    background-color: var(--color-cream);
    color: var(--color-petrol);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

/* O grão de papel a 4% sobre a página inteira. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

h1,
h2 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--color-petrol);
}

img,
svg {
    display: block;
    vertical-align: middle;
}

img {
    max-width: 100%;
    height: auto;
}

button,
input {
    font: inherit;
    color: inherit;
    background-color: transparent;
}

a {
    color: inherit;
    text-decoration: inherit;
}

:focus-visible {
    outline: 2px solid var(--color-terracotta);
    outline-offset: 3px;
}

::selection {
    background-color: oklch(var(--terracotta) / 0.18);
    color: var(--color-petrol);
}

.icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.icon--small {
    width: 0.875rem;
    height: 0.875rem;
}

/* `Kicker` size="sm": o rótulo em caixa alta da marca. */
.kicker {
    display: block;
    text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 0.3em;
}

.kicker--dark {
    color: oklch(var(--cream) / 0.8);
}

.kicker--quiet {
    color: oklch(var(--petrol) / 0.7);
}

/* ------------------------------------------------------------------ layout */

/* flex min-h-svh flex-col bg-cream lg:h-svh lg:flex-row lg:overflow-hidden */
.auth {
    display: flex;
    min-height: 100svh;
    flex-direction: column;
    background-color: var(--color-cream);
}

/* A foto. relative h-[26svh] max-h-52 min-h-28 shrink-0 overflow-hidden
   lg:order-2 lg:h-auto lg:max-h-none lg:w-[54%] lg:flex-1 */
.auth__photo {
    position: relative;
    height: 26svh;
    max-height: 13rem;
    min-height: 7rem;
    flex-shrink: 0;
    overflow: hidden;
}

.auth__photo-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* O véu: leve no celular, onde não há lema por cima; pesado a partir de lg. */
.auth__veil {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to bottom in oklab, oklch(var(--petrol) / 0.1), oklch(var(--petrol) / 0.35));
}

.auth__motto {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: none;
    padding: 2.5rem;
}

.auth__motto-rule {
    display: block;
    margin-bottom: 1.5rem;
    height: 1px;
    width: 4rem;
    background-color: var(--color-terracotta);
}

.auth__motto-quote {
    max-width: 22ch;
    text-wrap: balance;
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1.25;
    color: var(--color-cream);
}

.auth__motto-caption {
    margin-top: 1.25rem;
}

/* O formulário. flex flex-1 items-center justify-center px-6 py-10 sm:py-12
   lg:order-1 lg:w-[46%] lg:overflow-y-auto lg:overscroll-none lg:px-8 xl:px-12 */
.auth__panel {
    display: flex;
    flex: 1 1 0%;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

/* w-full max-w-[24rem] animate-rise-in-sm */
.auth__content {
    width: 100%;
    max-width: 24rem;
    animation: rise-in-sm 0.7s var(--ease-out) both;
}

.auth__logo {
    height: 2.25rem;
    width: auto;
}

.auth__rule {
    display: block;
    margin-top: 1.75rem;
    height: 1px;
    width: 3rem;
    background-color: var(--color-terracotta);
}

.auth__title {
    margin-top: 1.5rem;
    font-size: 1.6rem;
    line-height: 1.25;
}

.auth__lead {
    margin-top: 0.625rem;
    font-size: 0.85rem;
    line-height: 1.625;
    color: var(--color-warm-gray);
}

/* Aviso vindo do servidor (senha errada, código inválido, link vencido). Não existia no
   protótipo, que não falava com servidor nenhum: usa a cor e o ícone do erro de campo. */
.auth__alert {
    margin-top: 1.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border-radius: 20px;
    border: 1px solid oklch(var(--terracotta) / 0.3);
    background-color: oklch(var(--terracotta) / 0.06);
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-terracotta);
}

.auth__alert .icon {
    margin-top: 0.15rem;
}

.auth__notice {
    margin-top: 1.75rem;
    border-radius: 20px;
    background-color: oklch(var(--sand) / 0.6);
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-petrol);
}

.auth__form {
    margin-top: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.auth__alert + .auth__form,
.auth__notice + .auth__form {
    margin-top: 1.25rem;
}

.auth__forgot {
    margin-top: 0.625rem;
    display: flex;
    justify-content: flex-end;
}

.auth__footnote {
    margin-top: 2rem;
    border-top: 1px solid oklch(var(--petrol) / 0.1);
    padding-top: 1.5rem;
    font-size: 0.78rem;
    line-height: 1.625;
    color: var(--color-warm-gray);
}

.auth__divider {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: var(--color-warm-gray);
}

.auth__divider::before,
.auth__divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background-color: oklch(var(--petrol) / 0.1);
}

.auth__provider {
    margin-top: 1.5rem;
}

/* sm = 40rem, lg = 64rem, xl = 80rem: os breakpoints do Tailwind. */
@media (min-width: 40rem) {
    .auth__panel {
        padding-block: 3rem;
    }

    .auth__rule {
        margin-top: 2.25rem;
    }

    .auth__form {
        margin-top: 2.25rem;
    }
}

@media (min-width: 64rem) {
    .auth {
        height: 100svh;
        flex-direction: row;
        overflow: hidden;
    }

    .auth__photo {
        order: 2;
        height: auto;
        max-height: none;
        width: 54%;
        flex: 1 1 0%;
    }

    .auth__veil {
        background-image: linear-gradient(to bottom in oklab,
                oklch(var(--petrol) / 0.25), oklch(var(--petrol) / 0.6), oklch(var(--petrol) / 0.95));
    }

    .auth__motto {
        display: block;
    }

    /* Rola por dentro: numa tela baixa, sem isto, o rodapé seria cortado pelo h-svh. */
    .auth__panel {
        order: 1;
        width: 46%;
        overflow-y: auto;
        overscroll-behavior: none;
        padding-inline: 2rem;
    }
}

@media (min-width: 80rem) {
    .auth__motto {
        padding: 3.5rem;
    }

    .auth__panel {
        padding-inline: 3rem;
    }
}

/* ------------------------------------------------------------------- campo */

.field__label {
    margin-bottom: 0.5rem;
}

.field__control {
    position: relative;
}

/* h-13 w-full rounded-xl border bg-sand/40 px-4 py-3 text-[0.95rem] text-petrol */
.field__input {
    height: 3.25rem;
    width: 100%;
    border-radius: 20px;
    border: 1px solid oklch(var(--petrol) / 0.12);
    background-color: oklch(var(--sand) / 0.4);
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    color: var(--color-petrol);
    transition: color, background-color, border-color, outline-color;
    transition-duration: 200ms;
    transition-timing-function: var(--ease-standard);
}

.field__input::placeholder {
    color: var(--color-warm-gray);
    opacity: 1;
}

.field__input:hover {
    border-color: oklch(var(--petrol) / 0.25);
}

.field__input:focus {
    border-color: var(--color-terracotta);
}

.field__input[aria-invalid="true"] {
    border-color: var(--color-terracotta);
}

.field__input--with-accessory {
    padding-right: 3rem;
}

.field__accessory {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: oklch(var(--petrol) / 0.4);
    transition: color 200ms var(--ease-standard);
}

.field__accessory:hover {
    color: var(--color-terracotta);
}

.field__error {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.78rem;
    color: var(--color-terracotta);
}

/* ----------------------------------------------------------------- botões */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    transition: all 200ms var(--ease-standard);
}

.button:disabled {
    pointer-events: none;
    opacity: 0.7;
}

.button--primary {
    background-color: var(--color-terracotta);
    color: var(--color-cream);
    box-shadow: var(--shadow-soft);
}

.button--primary:hover {
    background-color: var(--color-terracotta-light);
}

.button--outline {
    border: 1px solid oklch(var(--petrol) / 0.15);
    color: var(--color-petrol);
}

.button--outline:hover {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
}

/* A cápsula principal da tela: mt-1 h-13 w-full text-[0.95rem] hover:scale-[1.02] */
.button--block {
    margin-top: 0.25rem;
    height: 3.25rem;
    width: 100%;
    font-size: 0.95rem;
}

.button--primary.button--block:hover {
    transform: scale(1.02);
}

/* As cápsulas da caixa de diálogo: h-11 px-5 text-[0.85rem] hover:scale-[1.03] */
.button--compact {
    height: 2.75rem;
    padding-inline: 1.25rem;
    font-size: 0.85rem;
}

.button--primary.button--compact:hover {
    transform: scale(1.03);
}

.link-button {
    font-size: 0.78rem;
    color: oklch(var(--petrol) / 0.7);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 200ms var(--ease-standard);
}

.link-button:hover {
    color: var(--color-terracotta);
}

/* ------------------------------------------------------- caixa de diálogo */

/* fixed left-1/2 top-1/2 max-h-[calc(100svh-2rem)] w-[calc(100%-2rem)] max-w-md
   overflow-y-auto rounded-2xl bg-cream p-7 shadow-lift */
.dialog {
    margin: auto;
    max-height: calc(100svh - 2rem);
    width: calc(100% - 2rem);
    max-width: 28rem;
    overflow-y: auto;
    border-radius: 24px;
    background-color: var(--color-cream);
    padding: 1.75rem;
    color: var(--color-petrol);
    box-shadow: var(--shadow-lift);
}

.dialog[open] {
    animation: dialog-in 200ms var(--ease-standard);
}

.dialog::backdrop {
    background-color: oklch(var(--petrol) / 0.45);
    backdrop-filter: blur(2px);
    animation: fade-in 200ms var(--ease-standard);
}

.dialog.is-closing {
    animation: dialog-out 200ms var(--ease-standard) forwards;
}

.dialog.is-closing::backdrop {
    animation: fade-out 200ms var(--ease-standard) forwards;
}

.dialog__title {
    font-size: 1.25rem;
    line-height: 1.25;
}

.dialog__text {
    margin-top: 0.75rem;
    text-wrap: pretty;
    font-size: 0.85rem;
    line-height: 1.625;
    color: var(--color-warm-gray);
}

.dialog__field {
    margin-top: 1.5rem;
}

.dialog__actions {
    margin-top: 1.75rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* --------------------------------------------------------------- animação */

@keyframes rise-in-sm {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dialog-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
}

@keyframes dialog-out {
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth__content,
    .dialog[open],
    .dialog::backdrop,
    .dialog.is-closing,
    .dialog.is-closing::backdrop {
        animation: none;
    }

    .button--primary:hover {
        transform: none !important;
    }
}