/* FounderKey — brand system (Tactile palette + Montserrat/Black Caviar).
   Calm, warm, low-cognitive-load: built for a neurodivergent audience. */

@font-face {
    font-family: 'Black Caviar';
    src: url('/fonts/black-caviar.woff2') format('woff2'),
         url('/fonts/black-caviar.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* falls back to Montserrat until the file is present */
}

:root {
    --grungy: #18181D;   /* near-black text        */
    --moody:  #061E2C;   /* button hover           */
    --dreamy: #184556;   /* primary teal           */
    --rockstar: #B9795B; /* terracotta accent      */
    --cozy:   #CFC0AE;   /* borders / dividers     */
    --fresh:  #F0EBE3;   /* page background        */
    --surface: #FBF9F5;  /* card                   */
    --ink-soft: #5b5b60;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    background: var(--fresh);
    color: var(--grungy);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    padding: 1.5rem;
}

.card {
    width: 100%;
    max-width: 25rem;
    background: var(--surface);
    border: 1px solid var(--cozy);
    border-radius: 18px;
    padding: 2.25rem 2rem;
    box-shadow: 0 12px 34px rgba(24, 24, 29, 0.07);
}

/* Wordmark: Founder (Montserrat) + Key (Black Caviar, teal) */
.wordmark {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.03em;
    text-decoration: none;
    margin-bottom: 1.6rem;
    font-size: 2rem;
    line-height: 1.15;
}
.wm-founder { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--grungy); letter-spacing: -0.02em; }
.wm-key     { font-family: 'Black Caviar', 'Montserrat', cursive; color: var(--dreamy); font-size: 1.8em; line-height: 0.8; position: relative; top: 6px; }

h1 { font-size: 1.35rem; font-weight: 600; margin: 0 0 0.3rem; }
.sub { color: var(--ink-soft); margin: 0 0 1.5rem; font-size: 0.95rem; }
.muted { color: var(--ink-soft); }

label { display: block; font-size: 0.82rem; font-weight: 500; margin: 0.9rem 0 0.35rem; }

input[type=email], input[type=password], input[type=text] {
    width: 100%;
    padding: 0.75rem 0.85rem;
    font-size: 1rem; /* 16px — prevents mobile zoom */
    font-family: inherit;
    color: var(--grungy);
    background: #fff;
    border: 1px solid var(--cozy);
    border-radius: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus {
    outline: none;
    border-color: var(--dreamy);
    box-shadow: 0 0 0 3px rgba(185, 121, 91, 0.28); /* rockstar focus ring */
}

.pw-wrap { position: relative; }
.pw-toggle {
    position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
    background: none; border: 0; cursor: pointer; color: var(--ink-soft);
    font-size: 0.82rem; font-family: inherit; padding: 0.25rem 0.45rem;
}
.pw-toggle:hover { color: var(--dreamy); }

a { color: var(--dreamy); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--rockstar); }

.btn {
    display: block; width: 100%; margin-top: 1.3rem;
    padding: 0.8rem 1rem; font-size: 1rem; font-weight: 600; font-family: inherit;
    text-align: center; text-decoration: none;
    color: var(--fresh); background: var(--dreamy);
    border: 0; border-radius: 10px; cursor: pointer;
    transition: background 0.15s;
}
.btn:hover { background: var(--moody); color: var(--fresh); }
.btn-ghost { background: transparent; color: var(--dreamy); border: 1px solid var(--cozy); margin-top: 0.75rem; }
.btn-ghost:hover { background: #fff; border-color: var(--dreamy); color: var(--dreamy); }

.divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.2rem 0 0; color: var(--ink-soft); font-size: 0.82rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--cozy); }

.error {
    background: #fbeae5; border: 1px solid #e6c3b6; color: #8a3b22;
    border-radius: 10px; padding: 0.65rem 0.85rem; font-size: 0.9rem; margin-bottom: 1rem;
}
.notice {
    background: #e9f0ee; border: 1px solid var(--cozy); color: var(--dreamy);
    border-radius: 10px; padding: 0.65rem 0.85rem; font-size: 0.9rem; margin-bottom: 1rem;
}

.access-label { font-size: 0.82rem; margin: 1.1rem 0 0.5rem; }
.pill {
    display: inline-block; background: #edf1f0; color: var(--dreamy);
    border: 1px solid var(--cozy); border-radius: 999px;
    padding: 3px 11px; font-size: 0.82rem; margin: 2px 3px 2px 0;
}
ul { padding-left: 1.15rem; margin: 0.4rem 0 0; }
li { margin: 0.15rem 0; }

.secure { color: var(--ink-soft); font-size: 0.78rem; margin: 0; }
.row { display: flex; justify-content: flex-end; margin-top: 0.5rem; font-size: 0.88rem; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}