/* Tokens: schema names from open-design (design-systems/binance/tokens.css) so a
   cross-brand swap stays mechanical; the values are ours, sampled off logo.png. */
:root{
  color-scheme:dark;

  --bg:#060b14;              /* deepest navy, from the wordmark family */
  --surface:#0c1524;         /* cards, bar */
  --surface-2:#121e31;       /* inputs, raised rows */
  --border:#1e3350;
  --border-soft:#152438;

  --text:#e6edf6;
  --text-muted:#8fa3be;

  --accent:#14b8c4;          /* logo teal -- links, focus, primary action */
  --accent-ink:#041a1d;
  --up:#20e18e;              /* logo green -- reserved for price/positive */
  --down:#ff5c5c;
  --warn:#fe9633;            /* logo amber */

  --font-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  --text-xs:11px; --text-sm:13px; --text-base:14px; --text-lg:17px; --text-xl:22px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px;

  --ring:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:var(--text-base)/1.55 var(--font-body);
  -webkit-font-smoothing:antialiased;
  /* one soft brand wash behind the fold, not a gradient on every surface */
  background-image:radial-gradient(60rem 30rem at 50% -10rem,#0f2a3a 0%,transparent 70%);
  background-repeat:no-repeat;
}
a{color:var(--accent);text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent);
  text-underline-offset:2px}
a:hover{text-decoration-color:var(--accent)}

.card{
  max-width:560px;margin:8vh auto;padding:var(--space-8);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:0 1px 0 #ffffff0a inset,0 24px 48px -24px #000c;
}
.card.wide{max-width:820px}

/* brand lockup: the full logo on auth screens, the mark alone once you are inside */
.lockup{display:block;width:min(476px,100%);height:auto;margin:0 0 var(--space-6)}
.mark{width:22px;height:22px;object-fit:contain;flex:none}
.page-head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}
.page-head h1{margin:0}

h1{font-size:var(--text-xl);letter-spacing:-.01em;margin:0 0 var(--space-2)}
h2{font-size:var(--text-lg);letter-spacing:-.005em;margin:var(--space-8) 0 var(--space-3);
   padding-top:var(--space-6);border-top:1px solid var(--border-soft)}

label{display:block;margin:var(--space-3) 0;color:var(--text-muted);font-size:var(--text-sm)}
input,textarea,select{
  display:block;width:100%;margin-top:var(--space-1);
  background:var(--surface-2);color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-3);
  font:var(--text-base)/1.4 var(--font-mono);
}
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;box-shadow:var(--ring)
}
input::placeholder{color:color-mix(in srgb,var(--text-muted) 70%,transparent)}
textarea{resize:vertical;min-height:8em}

button{
  background:var(--surface-2);color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-4);margin:var(--space-1) var(--space-2) var(--space-1) 0;
  font:600 var(--text-sm)/1.4 var(--font-body);cursor:pointer;
  transition:background .12s ease,border-color .12s ease;
}
button:hover{background:#18283f;border-color:#2b4a70}
button[type=submit],form>button:only-of-type{
  background:var(--accent);color:var(--accent-ink);border-color:transparent
}
button[type=submit]:hover,form>button:only-of-type:hover{
  background:color-mix(in srgb,var(--accent) 85%,#fff)
}
button.danger{border-color:color-mix(in srgb,var(--down) 55%,transparent);color:var(--down);background:transparent}
button.danger:hover{background:color-mix(in srgb,var(--down) 12%,transparent)}
button.link{background:none;border:none;color:var(--accent);padding:0;text-decoration:underline;font-weight:400}
form.inline{display:inline}

.muted{color:var(--text-muted);font-size:var(--text-sm)}
.err{color:var(--down)}
.ok{color:var(--up)}
.err,.ok{font-size:var(--text-sm)}

/* Django's form.as_p output, brought into the same rhythm as our own labels */
form p{margin:var(--space-3) 0}
form p label{margin:0}
.helptext,ul.errorlist{display:block;margin:var(--space-1) 0 0;padding:0;list-style:none;
  font-size:var(--text-xs);color:var(--text-muted)}
ul.errorlist{color:var(--down)}

#totp-qr{border-radius:var(--radius-sm);background:#fff;padding:var(--space-2)}
#totp-uri{word-break:break-all;font-family:var(--font-mono);font-size:var(--text-xs)}