/* ============================================================
   EduShieldID — components/buttons.css
   .btn* (all portals + auth) and the larger marketing button
   sizes used on the landing pages (.btn-primary-lg / .btn-outline-lg).
   ============================================================ */

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  /* min-height 44px comes from tokens.css (touch target); the vertical
     padding here only sets the resting look. */
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--clr-primary);
  color: #fff;
  border-color: var(--clr-primary);
}
.btn-primary:hover { background: var(--clr-primary-dark); border-color: var(--clr-primary-dark); }

.btn-secondary {
  background: var(--clr-surface);
  color: var(--clr-text);
  border-color: var(--clr-border);
}
.btn-secondary:hover { background: var(--clr-bg); }

.btn-ghost {
  background: transparent;
  color: var(--clr-primary);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--clr-primary-light); }

.btn-danger {
  background: var(--clr-danger);
  color: #fff;
  border-color: var(--clr-danger);
}
.btn-danger:hover { background: #b91c1c; }

.btn-sm { padding: var(--sp-1) var(--sp-3); font-size: var(--text-xs); }
.btn-lg { padding: var(--sp-3) var(--sp-6); font-size: var(--text-base); }
.btn-block { width: 100%; justify-content: center; }

/* ── Buttons (marketing sizes — landing pages) ────────────────── */
.btn-primary-lg,
.btn-outline-lg {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 13px 26px;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
}
.btn-primary-lg:hover,
.btn-outline-lg:hover { text-decoration: none; }

.btn-primary-lg {
  background: var(--clr-primary);
  color: #fff;
  border: 1px solid var(--clr-primary);
}
.btn-primary-lg:hover { background: var(--clr-primary-dark); border-color: var(--clr-primary-dark); }

.btn-outline-lg {
  background: transparent;
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
}
.btn-outline-lg:hover { border-color: var(--clr-primary); color: var(--clr-primary); }