/* =====================================================
   TOKENS
===================================================== */
@layer tokens {
    :root {
        --bg0:#05070a;
        --bg1:#0a0f14;
        --bg2:#0e141c;

        --glass:rgba(14,20,28,.6);
        --glass-strong:rgba(14,20,28,.78);

        --ink:#eef1f4;
        --text:#c7d0da;
        --muted:#8a96a3;

        --accent:#ffb84d;
        --accent-strong:#ff8c1a;
        --danger:#ff2b4e;

        --r-xl:26px;
        --r-lg:22px;
        --r:16px;
        --r-sm:12px;

        --blur:18px;

        --shadow-xl:
                0 30px 90px rgba(0,0,0,.75),
                inset 0 1px 0 rgba(255,255,255,.05);

        --stroke-soft:1px solid rgba(255,255,255,.06);
        --stroke-focus:1px solid rgba(255,184,77,.45);

        --maxw:420px;

        --font: ui-sans-serif, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    }
}

/* =====================================================
   BASE
===================================================== */
@layer base {
    * {
        box-sizing: border-box;
        font-family: var(--font);
    }

    body {
        margin: 0;
        min-height: 100vh;
        color: var(--text);
        background:
                radial-gradient(900px 500px at 50% -20%, rgba(255,184,77,.08), transparent 60%),
                linear-gradient(180deg, var(--bg2), var(--bg0));
        -webkit-font-smoothing: antialiased;
    }
}

/* =====================================================
   LAYOUT (mobile first)
===================================================== */
@layer layout {
    .layout {
        width: 100%;
        padding: 1.5rem;
    }

    .layout--centered {
        display: grid;
        place-items: center;
        min-height: 100vh;
        min-height: 100svh;
    }
}

/* =====================================================
   COMPONENTS
===================================================== */
@layer components {

    /* ================= AUTH CARD ================= */
    .auth {
        width: 100%;
        padding: 2.4rem 1.8rem 2.6rem;
        border-radius: var(--r-xl);
        background:
                linear-gradient(
                        180deg,
                        rgba(255,184,77,.06),
                        rgba(5,7,10,.35)
                ),
                var(--glass);
        backdrop-filter: blur(var(--blur)) saturate(140%);
        border: var(--stroke-soft);
        box-shadow: var(--shadow-xl);
    }

    .auth__title {
        margin: 0 0 1.8rem;
        text-align: center;
        font-weight: 500;
        letter-spacing: .6px;
        color: var(--ink);
    }

    .auth__form {
        display: flex;
        flex-direction: column;
        gap: 1.4rem;
    }

    .auth__error {
        min-height: 1em;
        text-align: center;
        font-size: .85rem;
        color: var(--danger);
    }

    /* ================= FIELD ================= */
    .field {
        position: relative;
    }

    .field__input {
        width: 100%;
        padding: 18px 14px 14px;
        background: var(--glass-strong);
        border-radius: var(--r-sm);
        border: var(--stroke-soft);
        color: var(--ink);
        font-size: .95rem;
        outline: none;
        transition: border .2s ease, box-shadow .2s ease;
    }

    .field__input::placeholder {
        color: transparent;
    }

    .field__label {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-size: .9rem;
        color: var(--muted);
        pointer-events: none;
        padding: 0 6px;
        transition: all .18s ease;
    }

    .field__input:focus + .field__label,
    .field__input:not(:placeholder-shown) + .field__label {
        top: -12px;
        font-size: .7rem;
        color: var(--accent);
    }

    .field__input:focus {
        border: var(--stroke-focus);
        box-shadow:
                0 0 0 1px rgba(255,184,77,.25),
                0 12px 32px rgba(255,140,26,.25);
    }

    /* ================= BUTTON ================= */
    .button {
        position: relative;
        padding: 15px;
        border-radius: var(--r);
        border: none;
        cursor: pointer;
        font-weight: 500;
        letter-spacing: .4px;
    }

    .button--primary {
        background:
                linear-gradient(
                        135deg,
                        var(--accent),
                        var(--accent-strong)
                );
        color: #140a02;
        box-shadow:
                0 14px 40px rgba(255,140,26,.45),
                inset 0 1px 0 rgba(255,255,255,.45);
        transition: transform .15s ease, box-shadow .15s ease;
    }

    .button--primary:hover {
        transform: translateY(-1px);
        box-shadow:
                0 20px 60px rgba(255,140,26,.55),
                inset 0 1px 0 rgba(255,255,255,.55);
    }

    .button:disabled {
        opacity: .6;
        cursor: not-allowed;
    }
    .button__loader {
        display: none;
        width: 18px;
        height: 18px;
        border: 2px solid #140a02;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin .8s linear infinite;
        position: absolute;
        inset: 0;
        margin: auto;
    }

    .button--loading .button__text {
        visibility: hidden;
    }

    .button--loading .button__loader {
        display: block;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

}

/* =====================================================
   UTILITIES / UPSCALE
===================================================== */
@layer utilities {
    /* Desktop enhancement */
    @media (min-width: 640px) {
        .auth {
            max-width: var(--maxw);
            padding: 2.6rem 2.2rem 2.8rem;
        }
    }
}