/* ============================================================
   Secret Santa — warm & refined theme
   Every knob you're likely to tweak lives in :root / [data-theme]
   ============================================================ */

:root {
    /* ---- palette (light: warm parchment) ---- */
    --bg:          #F6F1E7;
    --bg-glow:     rgba(210, 172, 100, 0.30);   /* soft gold glow behind the card */
    --card:        #FFFCF6;
    --ink:         #33291F;                     /* main text: warm near-black */
    --muted:       #7A6C58;                     /* secondary text */
    --line:        #E6DCC8;                     /* hairlines, input borders */
    --field-bg:    #FFFDF8;
    --panel-bg:    #F7EEDC;                     /* highlight boxes */
    --panel-line:  #E7D8B6;
    --primary:     #2C5F46;                     /* forest green */
    --primary-deep:#224936;
    --btn-bg:      #2C5F46;
    --btn-ink:     #FBF7EC;
    --btn-bg-hover:#234B38;
    --accent:      #9C3D3D;                     /* cranberry, used sparingly */
    --focus:       #C99A3F;                     /* honey-gold focus ring */
    --shadow:      0 1px 2px rgba(96, 74, 44, 0.06),
                   0 12px 32px -12px rgba(96, 74, 44, 0.18);

    /* ---- type ---- */
    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --radius: 18px;
    --radius-sm: 11px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:          #201B15;
        --bg-glow:     rgba(201, 154, 63, 0.12);
        --card:        #2A241C;
        --ink:         #F2EADB;
        --muted:       #B7A88E;
        --line:        rgba(242, 234, 219, 0.14);
        --field-bg:    #241F18;
        --panel-bg:    #332B20;
        --panel-line:  rgba(231, 216, 182, 0.22);
        --primary:     #8FC0A2;
        --btn-bg:      #8FC0A2;
        --btn-ink:     #1E2A22;
        --btn-bg-hover:#A5CFB6;
        --accent:      #DE8A84;
        --focus:       #D9B36A;
        --shadow:      0 1px 2px rgba(0, 0, 0, 0.4),
                       0 16px 40px -16px rgba(0, 0, 0, 0.6);
    }
}

/* ---- reset-ish ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
    background:
        radial-gradient(120% 90% at 50% -10%, var(--bg-glow) 0%, transparent 60%)
        var(--bg);
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: calc(1.25rem + env(safe-area-inset-top)) 1.25rem
             calc(1.25rem + env(safe-area-inset-bottom));
}
::selection { background: var(--focus); color: #fff; }

/* ---- the card ---- */
.card {
    width: min(100%, 26rem);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1.6rem, 6vw, 2.6rem);
    animation: rise 260ms ease-out both;
}
@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .card { animation: none; }
}

.kicker {
    margin: 0 0 1.1rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
}
.kicker::after {
    content: "";
    display: block;
    width: 2.2rem;
    height: 2px;
    margin-top: 0.55rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--focus), var(--accent));
}

/* ---- type ---- */
h1 {
    margin: 0 0 0.4rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.55rem, 1.15rem + 2.2vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.lead { margin: 0 0 1.4rem; color: var(--muted); }
.note {
    margin: 0 0 1.4rem;
    font-style: italic;
    color: var(--muted);
    font-size: 0.95rem;
}

/* ---- panels (passphrase box, "not drawn yet") ---- */
.panel {
    margin: 0 0 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--panel-bg);
    border: 1px solid var(--panel-line);
    border-left: 3px solid var(--focus);
    border-radius: var(--radius-sm);
}

/* ---- forms ---- */
.stack { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.35rem; }
label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
input {
    font: inherit;                    /* 16px base stops iOS zoom-on-focus */
    width: 100%;
    border-radius: var(--radius-sm);
}
input:not([type="submit"]):not([type="button"]) {
    padding: 0.75rem 0.95rem;
    background: var(--field-bg);
    border: 1px solid var(--line);
    color: var(--ink);
    transition: border-color 150ms, box-shadow 150ms;
}
input:not([type="submit"]):not([type="button"])::placeholder { color: var(--muted); opacity: 0.75; }
input:not([type="submit"]):not([type="button"]):hover { border-color: var(--muted); }
input:not([type="submit"]):not([type="button"]):focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent);
}

/* passphrase input + button share a row on wide screens, stack on narrow */
.reveal-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 1.4rem;
}
.reveal-row input:not([type="submit"]):not([type="button"]) { flex: 1 1 11rem; }
.reveal-row input[type="button"] { flex: 0 1 auto; }

/* ---- buttons ---- */
input[type="submit"],
input[type="button"] {
    padding: 0.78rem 1.4rem;
    border: none;
    background: var(--btn-bg);
    color: var(--btn-ink);
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms, transform 120ms;
}
input[type="submit"]:not(.btn-ghost):hover,
input[type="button"]:hover { background: var(--btn-bg-hover); }
input[type="submit"]:not(.btn-ghost):active,
input[type="button"]:active { transform: translateY(1px); }
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
a:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

input[type="submit"].btn-ghost {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
    font-weight: 500;
    padding: 0.55rem 1.1rem;
    font-size: 0.9rem;
    width: auto;
}
input[type="submit"].btn-ghost:hover { background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--ink); }

.card-foot {
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    text-align: right;
}

/* ---- tiny helpers ---- */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- very small phones: full-width buttons, no crowding ---- */
@media (max-width: 380px) {
    input[type="submit"],
    input[type="button"],
    .reveal-row input[type="button"] { width: 100%; }
    .card-foot { text-align: center; }
}