/* ===== ROOT DESIGN SYSTEM ===== */
:root{
  --bg:#FAF7FF;
  --card:#FFFFFF;
  --text:#1F1F1F;
  --muted:#6B6B6B;

  --primary:#7C5CFF;
  --primary-hover:#6848E8;

  --pink:#FF7BA9;
  --mint:#AEE6D8;
  --lavender:#B8A1FF;

  --border:rgba(0,0,0,0.08);
  --shadow:0 12px 30px rgba(124,92,255,0.15);
}

body{
  font-family: Inter, sans-serif;
  background: var(--bg);
}

/* ===== CARD ===== */
.auth-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 28px;
  max-width: 380px;
  width: 100%;
}

/* ===== TITLE ===== */
.title{
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
}

/* ===== INPUTS ===== */
.form-control{
  border-radius: 12px;
  padding: 12px;
  border: 1px solid var(--border);
}

.form-control:focus{
  border-color: var(--lavender);
  box-shadow: 0 0 0 3px rgba(124,92,255,0.15);
}

/* ===== CTA ===== */
.btn-primary{
  background: var(--primary);
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-weight: 600;
}

.btn-primary:hover{
  background: var(--primary-hover);
}

/* ===== LINKS ===== */
.small-link{
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

.small-link:hover{
  color: var(--text);
}

/* ===== SOCIAL BUTTONS ===== */
.social-btn{
  border-radius: 12px;
  padding: 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  background: #fff;
}

.social-apple{
  background:#000;
  color:#fff;
  border:none;
}

.social-google:hover{
  background:#f7f7f7;
}