/* ==========================================================================
   Stufin — neumorphic design system
   --------------------------------------------------------------------------
   Soft raised surfaces and pressed-in controls on warm white, with orange and
   baby orange as the only accents. Text stays near-black on near-white so it
   is readable; the soft shadows are for shape, never for type.

   Load this before a page's own stylesheet. Everything here is either a token
   or a .neu-* component, so pages can adopt it one piece at a time.
   ========================================================================== */

:root {
    color-scheme: light;

    /* surfaces — background and cards share a colour; depth comes from shadow */
    --neu-bg: #f1ece7;
    --neu-surface: #f4f0eb;
    --neu-raised: #f7f3ef;
    --neu-light: #ffffff;
    --neu-dark: #d5cdc4;

    /* ink */
    --neu-ink: #16130f;
    --neu-ink-soft: #7b7268;
    --neu-ink-faint: #a89f95;

    /* orange */
    --neu-brand: #ff7f27;
    --neu-brand-strong: #ea6608;
    --neu-brand-ink: #8a3f05;
    --neu-baby: #ffd7b8;
    --neu-baby-soft: #fff1e5;

    /* states */
    --neu-danger: #b3271a;
    --neu-danger-soft: #ffe6e2;
    --neu-ok: #1a6f41;
    --neu-ok-soft: #e2f4e9;

    /* radii */
    --neu-r-sm: 12px;
    --neu-r: 18px;
    --neu-r-lg: 26px;
    --neu-r-pill: 999px;

    /* elevation */
    --neu-out: 9px 9px 18px var(--neu-dark), -9px -9px 18px var(--neu-light);
    --neu-out-sm: 5px 5px 11px var(--neu-dark), -5px -5px 11px var(--neu-light);
    --neu-in: inset 5px 5px 10px var(--neu-dark), inset -5px -5px 10px var(--neu-light);
    --neu-in-sm: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light);
    --neu-glow: 0 12px 26px rgba(255, 127, 39, 0.32);
    --neu-ring: 0 0 0 3px rgba(255, 127, 39, 0.35);
}

.dark-theme {
    color-scheme: dark;

    --neu-bg: #1c1a18;
    --neu-surface: #211e1b;
    --neu-raised: #262220;
    --neu-light: #2e2a26;
    --neu-dark: #121110;

    --neu-ink: #f4efe9;
    --neu-ink-soft: #a79c91;
    --neu-ink-faint: #7d7369;

    --neu-brand: #ff8e42;
    --neu-brand-strong: #ff7f27;
    --neu-brand-ink: #ffc79c;
    --neu-baby: #4a3122;
    --neu-baby-soft: #2b211b;

    --neu-danger: #ff9d92;
    --neu-danger-soft: #3a201c;
    --neu-ok: #86dfae;
    --neu-ok-soft: #17301f;

    --neu-glow: 0 12px 26px rgba(255, 127, 39, 0.22);
    --neu-ring: 0 0 0 3px rgba(255, 142, 66, 0.35);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
}

/* The page itself: warm ground with a soft baby-orange light in one corner. */
.neu-page {
    min-height: 100vh;
    background:
        radial-gradient(1100px 520px at 82% -12%, var(--neu-baby-soft) 0%, rgba(255, 241, 229, 0) 62%),
        var(--neu-bg);
    color: var(--neu-ink);
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

/* ---------- surfaces ---------- */

.neu-card {
    background: var(--neu-surface);
    border-radius: var(--neu-r-lg);
    box-shadow: var(--neu-out);
}

.neu-inset {
    background: var(--neu-surface);
    border-radius: var(--neu-r);
    box-shadow: var(--neu-in);
}

/* ---------- controls ---------- */

.neu-field {
    width: 100%;
    height: 54px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--neu-r);
    background: var(--neu-surface);
    box-shadow: var(--neu-in);
    color: var(--neu-ink);
    font: inherit;
    font-size: 16px; /* 16px keeps iOS from zooming the page on focus */
    outline: none;
    transition: box-shadow 0.18s ease;
}

.neu-field::placeholder {
    color: var(--neu-ink-faint);
}

.neu-field:focus {
    box-shadow: var(--neu-in), var(--neu-ring);
}

.neu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 54px;
    padding: 0 26px;
    border: 0;
    border-radius: var(--neu-r-pill);
    background: var(--neu-raised);
    box-shadow: var(--neu-out-sm);
    color: var(--neu-ink);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}

.neu-btn:active {
    box-shadow: var(--neu-in-sm);
    transform: translateY(1px);
}

.neu-btn-primary {
    background: linear-gradient(145deg, #ff9147, var(--neu-brand-strong));
    box-shadow: var(--neu-glow), var(--neu-out-sm);
    color: #fff;
}

.neu-btn-primary:hover {
    filter: brightness(1.04);
}

.neu-btn-primary:active {
    box-shadow: inset 4px 4px 9px rgba(140, 60, 6, 0.45), inset -3px -3px 8px rgba(255, 190, 145, 0.45);
    transform: translateY(1px);
}

.neu-btn-block {
    display: flex;
    width: 100%;
}

.neu-btn.is-busy {
    filter: saturate(0.75);
    cursor: progress;
}

/* round icon button — used for the back arrow */
.neu-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: var(--neu-r-pill);
    background: var(--neu-raised);
    box-shadow: var(--neu-out-sm);
    color: var(--neu-ink);
    cursor: pointer;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.neu-icon-btn:active {
    box-shadow: var(--neu-in-sm);
    transform: translateY(1px);
}

.neu-icon-btn svg {
    width: 22px;
    height: 22px;
}

/* text-only button, for Resend and similar */
.neu-link-btn {
    padding: 10px 2px;
    border: 0;
    background: none;
    color: var(--neu-brand-strong);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.neu-link-btn:disabled {
    color: var(--neu-ink-faint);
    cursor: default;
}

.neu-link {
    color: var(--neu-brand-strong);
    font-weight: 600;
    text-decoration: none;
}

.neu-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- messages ---------- */

.neu-alert {
    padding: 13px 16px;
    border-radius: var(--neu-r);
    box-shadow: var(--neu-in-sm);
    font-size: 14px;
}

.neu-alert-error {
    background: var(--neu-danger-soft);
    color: var(--neu-danger);
}

.neu-alert-success {
    background: var(--neu-ok-soft);
    color: var(--neu-ok);
}

.neu-alert-info {
    background: var(--neu-baby-soft);
    color: var(--neu-brand-ink);
}

.dark-theme .neu-alert-info {
    color: var(--neu-brand-ink);
}

/* ---------- labels and small print ---------- */

.neu-label {
    display: block;
    margin: 0 0 8px 4px;
    color: var(--neu-ink-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.neu-muted {
    color: var(--neu-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
    .neu-btn,
    .neu-icon-btn,
    .neu-field {
        transition: none;
    }
}