/* ==========================================================================
   Clidit — shared auth styles
   Reuses the design tokens and conventions from index.html exactly
   (colors, radius, type scale, button styles). Scoped to auth pages only.
   ========================================================================== */

:root{
  --black:#0A0A0A;
  --text:#171717;
  --dark-gray:#404040;
  --muted:#737373;
  --white:#FFFFFF;
  --off-white:#F7F7F5;
  --light-gray:#F1F1EF;
  --border:#E2E2DF;
  --hover:#EAEAEA;
  --danger:#B3261E;

  --radius-sm:10px;
  --radius-md:16px;
  --ease: cubic-bezier(.16,.8,.24,1);
}

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

body{
  margin:0;
  background:var(--off-white);
  color:var(--text);
  font-family:'Inter','Manrope',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

:focus-visible{
  outline:2px solid var(--text);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Page shell ---------- */
.auth-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.auth-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  height:88px;
}
.auth-nav .wordmark{
  font-weight:600;
  font-size:19px;
  letter-spacing:-0.03em;
  color:var(--black);
}

.auth-main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 20px 64px;
}

/* ---------- Card ---------- */
.auth-card{
  width:100%;
  max-width:400px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:40px 36px;
  box-shadow:0 1px 2px rgba(10,10,10,0.03), 0 24px 48px -32px rgba(10,10,10,0.12);
}

.auth-head{
  text-align:center;
  margin-bottom:28px;
}
.auth-head h1{
  font-size:26px;
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1.2;
  color:var(--black);
  margin:0;
}
.auth-head p{
  font-size:14.5px;
  color:var(--muted);
  line-height:1.6;
  margin:10px 0 0;
}

/* ---------- Form ---------- */
.auth-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.field label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  margin-bottom:7px;
}

.input{
  width:100%;
  height:46px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--white);
  color:var(--text);
  font-size:14.5px;
  font-family:inherit;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input::placeholder{ color:#A3A39D; }
.input:hover{ border-color:#cfcfcb; }
.input:focus{
  outline:none;
  border-color:var(--black);
  box-shadow:0 0 0 3px rgba(10,10,10,0.06);
}
.input.input-error{
  border-color:var(--danger);
}
.input.input-error:focus{
  box-shadow:0 0 0 3px rgba(179,38,30,0.08);
}

.input-wrap{
  position:relative;
}
.input-wrap .input{
  padding-right:64px;
}
.toggle-visibility{
  position:absolute;
  top:0; right:2px;
  height:46px;
  padding:0 12px;
  background:none;
  border:none;
  cursor:pointer;
  font-size:12.5px;
  font-weight:600;
  color:var(--muted);
  transition:color .2s var(--ease);
}
.toggle-visibility:hover{ color:var(--text); }

.field-error{
  display:block;
  margin-top:7px;
  font-size:12.5px;
  color:var(--danger);
  line-height:1.5;
}

.field-row-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.link-muted{
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  transition:color .2s var(--ease);
}
.link-muted:hover{ color:var(--black); }

/* ---------- Buttons (matches landing .btn-primary) ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  height:46px;
  padding:0 22px;
  border-radius:var(--radius-sm);
  font-size:14.5px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  border:1px solid transparent;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease), opacity .2s var(--ease);
}
.btn:active{ transform:scale(.98); }
.btn:disabled{ cursor:not-allowed; opacity:.7; transform:none; }

.btn-primary{
  background:var(--black);
  color:var(--white);
}
.btn-primary:hover:not(:disabled){ background:#242424; }

.btn-secondary{
  background:transparent;
  color:var(--text);
  border-color:var(--border);
}
.btn-secondary:hover:not(:disabled){ background:var(--off-white); border-color:#cfcfcb; }

.btn-loading{ position:relative; color:transparent !important; }
.btn-loading::after{
  content:'';
  position:absolute;
  width:16px; height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.35);
  border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.btn-secondary.btn-loading::after{
  border:2px solid rgba(10,10,10,0.2);
  border-top-color:var(--black);
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Google button ---------- */
.btn-google{
  gap:10px;
}
.btn-google svg{ flex-shrink:0; }

/* ---------- Divider ---------- */
.divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:22px 0;
}
.divider::before,
.divider::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--border);
}
.divider span{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.06em;
  color:var(--muted);
}

/* ---------- Form-level banner ---------- */
.form-banner{
  font-size:13.5px;
  line-height:1.5;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  margin-bottom:18px;
}
.form-banner-error{
  background:#FBEAE9;
  color:var(--danger);
  border:1px solid #F1D3D1;
}
.form-banner-success{
  background:var(--light-gray);
  color:var(--dark-gray);
  border:1px solid var(--border);
}

/* ---------- Footnote ---------- */
.auth-footnote{
  text-align:center;
  font-size:13.5px;
  color:var(--muted);
  margin-top:24px;
}
.auth-footnote a{
  color:var(--black);
  font-weight:600;
}
.auth-footnote a:hover{ text-decoration:underline; }

.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13.5px;
  font-weight:500;
  color:var(--muted);
  margin-bottom:20px;
}
.back-link:hover{ color:var(--black); }

/* ---------- Responsive ---------- */
@media (max-width:480px){
  .auth-card{ padding:32px 24px; border-radius:var(--radius-sm); }
  .auth-nav{ height:72px; }
}