/* css/auth.css
   Styles specific to index.html (login / sign-up page).
   Depends on: base.css
─────────────────────────────────────────────────────────────────────────────── */

/* ── Layout ──────────────────────────────────────────────────────────────────── */

body {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         24px;
}

.card {
  width:      100%;
  max-width:  420px;
  padding:    40px;
  border-radius: var(--radius-xl);
}

.logo {
  margin-bottom: 32px;
}

.logo-icon {
  width:  36px;
  height: 36px;
  font-size: 18px;
  border-radius: 8px;
}

.logo-text { font-size: 20px; }


/* ── Tab switcher ────────────────────────────────────────────────────────────── */

.tabs {
  display:       flex;
  background:    var(--color-surface-2);
  border-radius: var(--radius-md);
  padding:       4px;
  margin-bottom: 28px;
}

.tab {
  flex:          1;
  padding:       8px;
  text-align:    center;
  font-size:     14px;
  font-weight:   500;
  color:         var(--color-text-dim);
  cursor:        pointer;
  border-radius: var(--radius-sm);
  border:        none;
  background:    none;
  transition:    all 0.15s;
}

.tab.active {
  background: var(--color-border);
  color:      var(--color-text);
}


/* ── Form fields ─────────────────────────────────────────────────────────────── */

label {
  display:       block;
  font-size:     13px;
  font-weight:   500;
  color:         var(--color-text-muted);
  margin-bottom: 6px;
}

input {
  width:         100%;
  background:    var(--color-surface-2);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       10px 14px;
  font-size:     14px;
  color:         var(--color-text);
  outline:       none;
  transition:    border-color 0.15s;
  margin-bottom: 16px;
}

input:focus       { border-color: var(--color-accent); }
input::placeholder { color: var(--color-text-ghost); }

.btn-primary {
  margin-top: 4px;
}